I have a container div with an object inside of it. I can animate one property of it, e.g. bottom, OR left, but can't animate BOTH at the same time.
How does one animate both properties at the same time so it moves diagonally? I don't understand why the following code does not work:
#container {
position: relative;
}
#keyframes move {
0% { left: 0px; bottom: 0px; }
100% { left: 122px; bottom: 157px; }
}
#object {
position: absolute;
width: 10px;
left: 0px;
bottom: 0px;
/*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
animation: move 2.5s linear 0s infinite;
}
It does move diagonally:
#container {
position: relative;
height: 180px;
}
#keyframes move {
0% { left: 0px; bottom: 0px; }
100% { left: 122px; bottom: 157px; }
}
#object {
position: absolute;
width: 10px;
left: 0px;
bottom: 0px;
animation: move 2.5s linear 0s infinite;
}
<div id="container"><div id="object">MOVING</div></div>
You can consider translation to have the same movement with better performance:
#container {
position: relative;
height: 180px;
}
#keyframes move {
0% { transform:translate(0,0) }
100% { transform:translate(125px,-125px) }
}
#object {
position: absolute;
width: 10px;
left: 0px;
bottom: 0px;
animation: move 2.5s linear 0s infinite;
}
<div id="container"><div id="object">MOVING</div></div>
Related
Please help, when I'm trying to play animation with moving ball in position X and Y at the same time it doesn't work, some strange behaviour. I would like to look like a batted and falling ball
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball-x 2s, fly-ball-y 2s;
}
#keyframes fly-ball-x {
100% {
transform: translateX(300px);
}
}
#keyframes fly-ball-y {
100% {
transform: translateY(100px);
}
}
<div class="ball"></div>
**The result I'm expecting is like the code below:**
#keyframes fly-ball-x {
100% {
left: 300px;
}
}
#keyframes fly-ball-y {
100% {
bottom: 0;
}
}
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball-x 2s cubic-bezier(0.17, 0.67, 0.6, 1), fly-
ball-y 2s;
}
<div class="ball"></div>
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball 2s
}
#keyframes fly-ball {
100% {
transform: translateX(300px) translateY(100px);
}
}
<div class="ball"></div>
It is because you weren't running the animations concurrently. Here both translations are just being run at the same time. You just had a bit more than you needed.
EDIT
Check out this blog post. It gives explanations on the kinds of curves it seems you are going for Curved Path Animations In CSS
I am trying to apply a cool "Glitch Effect" I saw in this video here:
However, I cannot seem to get this animation to work. Here is the heading element I am trying to apply the effect to:
<h1 class="header-block-heading-primary">Web Developer</h1>
Here is the SCSS:
.header-block-heading-primary {
// animation: glitch-effect 3s infinite;
position: relative;
&::before,
&::after {
position: absolute;
left: 0;
top: 0;
content: "";
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
&::before {
color: red;
animation: glitch-effect 3s infinite;
}
&::after {
color: blue;
animation: glitch-effect 2s infinite;
}
}
Here is the animation:
#keyframes glitch-effect {
0% {
left: -3px;
top: -3px;
}
25% {
left: 3px;
top: 0px;
}
50% {
left: -2px;
top: 3px;
}
75% {
left: 2px;
top: -2px;
}
100% {
left: 0px;
top: -3px;
}
}
And here is the outputted CSS:
.header-block-heading-primary {
position: relative;
}
.header-block-heading-primary::before,
.header-block-heading-primary::after {
position: absolute;
left: 0;
top: 0;
content: "";
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
.header-block-heading-primary::before {
color: red;
-webkit-animation: glitch-effect 3s infinite;
animation: glitch-effect 3s infinite;
}
.header-block-heading-primary::after {
color: blue;
-webkit-animation: glitch-effect 2s infinite;
animation: glitch-effect 2s infinite;
}
I have followed the same setup as the tutorial, and even referenced some old projects of mine looking at the use of ::before and ::after and they work just fine with the practically the same code (for the pseudo elements).
I have tried just single semi-colon, so :before & :after, and that did not work. I added the animation directly to the element itself (as seen by the commented out // animation: glitch-effect 3s infinite; underneath the .header-block-heading-primary selector), and it works fine so I'm being led to believe the ::before and ::after elements are not working. Also manually adding -webkit- in the nested SCSS did not work either.
I have looked at multiple other posts here on the site and could not find a answer that helped me solve this problem. So any help with this would be greatly appreciated!
your animations is working but you need to set ::after and ::before content:"Web Developer". you can show the effect in snippet.
.header-block-heading-primary {
position: relative;
}
.header-block-heading-primary::before,
.header-block-heading-primary::after {
position: absolute;
left: 0;
top: 0;
content: "Web Developer";
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
.header-block-heading-primary::before {
color: red;
animation: glitch-effect 3s infinite;
}
.header-block-heading-primary::after {
color: blue;
animation: glitch-effect 2s infinite;
}
#keyframes glitch-effect {
0% {
left: -3px;
top: -3px;
}
25% {
left: 3px;
top: 0px;
}
50% {
left: -2px;
top: 3px;
}
75% {
left: 2px;
top: -2px;
}
100% {
left: 0px;
top: -3px;
}
}
<h1 class="header-block-heading-primary">Web Developer</h1>
this is the sass code this is working in my page please try this code.
.header-block-heading-primary {
position: relative;
&::before,
&::after {
position: absolute;
left: 0;
top: 0;
content: "Web Developer";
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
&::before {
color: red;
animation: glitch-effect 3s infinite;
}
&::after {
color: blue;
animation: glitch-effect 2s infinite;
}
}
#keyframes glitch-effect {
0% {
left: -3px;
top: -3px;
}
25% {
left: 3px;
top: 0px;
}
50% {
left: -2px;
top: 3px;
}
75% {
left: 2px;
top: -2px;
}
100% {
left: 0px;
top: -3px;
}
}
Thank you.
I got it! The background image for the header section was conflicting with the ::before and ::after, so I just need to add a higher z-index to the heading and it works!
.header-block-heading-primary {
position: relative;
z-index: 20;
&::before {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: "Web Developer";
z-index: -1;
}
&::after {
content: "Web Developer";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
&::before {
color: #ff00c1;
animation: glitch-effect 3s infinite;
}
&::after {
color: #3498db;
animation: glitch-effect 2s infinite;
}
&:hover::before {
animation: glitch-effect 1s infinite;
}
&:hover::after {
animation: glitch-effect 2s infinite;
}
}
I want my image to start with top:0 and ends with bottom:0 with smooth animation. I am struggling to find out the solution.
To be very clear i cannot use background images for SEO purpose. JS solutions are also welcome.
.element {
height: 200px;
width: 400px;
background-color: red;
position: relative;
margin: auto;
overflow: hidden;
}
.element img {
animation: nudge 5s linear infinite alternate;
position: absolute;
top: 0;
left: 0;
}
#keyframes nudge {
0%, 100% {
top: 0;
bottom: auto;
}
50% {
bottom: 0%;
top: auto;
}
}
<div class="element">
<img src="https://www.neelnetworks.com/wp-content/uploads/2018/08/ecommerce-bg.png" alt=""></div>
Instead of trying to animate on top and bottom, you can animate on translateY and move it down with top so it doesnt go off screen
.element {
height: 200px;
width: 400px;
background-color: red;
position: relative;
margin: auto;
overflow: hidden;
}
.element img {
animation: nudge 2s linear infinite alternate;
position: absolute;
top: 0;
transform: translateY(0);
}
#keyframes nudge {
100% {
transform: translateY(-100%);
top: 100%;
}
}
<div class="element"><img src="https://www.neelnetworks.com/wp-content/uploads/2018/08/ecommerce-bg.png" alt=""></div>
I have a problem with CSS currently.
https://jsfiddle.net/k9cfdofv/1/
There you can see that the
stripe (parallelogram) comes from the bottom, but it goes a little bit to right before it goes in that state I want it.
So I want it come from the bottom and go to the top without this shift at the end.
CSS-Code:
.stripe {
width: 100px;
height: 100px;
margin-left: 100px;
background: red;
transform: skew(-10deg);
animation: ani 1s linear 1 forwards;
position: absolute;
bottom: 10px;
}
#keyframes ani {
0% {
height: 0px;
}
100% {
height: 700px;
}
}
It can be done by setting a transform-origin for element to be skewed to left bottom.
div {
width: 100px;
height: 100px;
margin-left: 100px;
background: red;
transform: skew(-10deg);
transform-origin: left bottom;
animation: ani 1s linear 10 forwards;
position: absolute;
bottom: 10px;
}
#keyframes ani {
0% {
height: 0px;
}
100% {
height: 700px;
}
}
<div>
</div>
I want to create a full CSS animated progress bar, using steps() to go through the end.
#keyframes loading {
0% {
width: 0%;
left: 50%;
}
100% {
width: 100%;
left: 0%;
}
}
div {
position: absolute;
top: 50%;
left: 50%;
width: 0%;
height: 1px;
background-color: #000;
-webkit-animation: loading 15s steps(15, end);
animation: loading 15s steps(15, end);
transition: all 0.5s ease-out;
}
My main objective is to keep the steps() and add a transition effect to smooth it.
How could I achieve that without JS ?
I think this is what you are after.
I've simplified this to 5 positions...the math for 15 stages is pretty simple though.
#keyframes loading {
0% {
width: 0%;
}
25% {
width: 25%;
}
50% {
width: 50%;
}
75% {
width: 75%;
}
100% {
width: 100%;
}
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: 10px;
background-color: #000;
animation: loading 5s infinite;
}
<div></div>