Develop Reference

Perfectly smooth looped eased css animation

I'm trying to animate an element to slowly move from left to right a small distance and do it in a smooth way but the result is not very good.
Here is what I have so far:
.animate_sideways{animation:sideways 5s linear infinite; animation-timing-function: ease-in, ease-in-out;};
#keyframes sideways {
50% {
transform: translateX(30px);
}
100% {
transform: translateX(-30px);
}
}

I think the problem is related to the missing start point in the keyframes for the transform attribute.
A minor tweak to your code should correct the issue.
A different animation-timing-function value or time frame (less that 5s for example) may suit you better as well.
.contain { width:100% }
.animate_sideways {
width:40px;
height:40px;
background:#482;
animation:sideways 5s linear infinite;
animation-timing-function:ease-in, ease-in-out;
}
#keyframes sideways {
0% { transform: translateX(-30px) }
50% { transform: translateX(30px) }
100% { transform: translateX(-30px) }
}
<div class="contain">
<div class="animate_sideways"></div>
</div>

How to bounce animation when scroll?

I have this .png that I wanted to make it bounce a little every time it detects a scroll movement but I'm not good in javascript and css. I hope you guys can help me
<div class="arrownav bounce">
<a href="" class="logo">
<img src="{{ asset('assets/img/arrow down.png') }}" height="45">
</a>
</div>
I am now using a css that made the image bounce
this is the code:
.bounce {
-webkit-animation:bounce 1s infinite;
-moz-animation:bounce 1s infinite;
-o-animation:bounce 1s infinite;
animation:bounce 1s infinite;
}
#-webkit-keyframes bounce {
0% { bottom:0px; }
50% { bottom:15px; }
100% {bottom:30;}
}
#-moz-keyframes bounce {
0% { bottom:0px; }
50% { bottom:15px; }
100% {bottom:30;}
}
#-o-keyframes bounce {
0% { bottom:0px; }
50% { bottom:15px; }
100% {bottom:30;}
}
#keyframes bounce {
0% { bottom:0px; }
50% { bottom:15px; }
100% {bottom:30;}
}

The first thing I noticed is the missing unit in all #keyframes, right here:
100% {bottom:30;}
This should be:
100% { bottom:30px; }
You've used the bottom style in you animation, which is perfectly fine, but in order for it to work the element's position needs to be either relative, absolute or fixed (more here).
.bounce {
position: relative;
-webkit-animation: bounce 1s infinite;
-moz-animation: bounce 1s infinite;
-o-animation: bounce 1s infinite;
animation: bounce 1s infinite;
}
Here's a working fiddle.
Bonus
Another way to change the element's position in the animation is the transform style, instead of using bottom. When you use transform, you don't need position: relative;.
#keyframes bounce {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(-30px);
}
}
Fiddle

CSS3 Animation - Infinite moving arrow

In this website link an arrow is moving i want to know to how to set this effect in CSS
i have a code
-webkit-animation: new_icon 2s linear 0s infinite alternate;
But for the moment this dosnt work.

You need to declare your animation details for new_icon - see the code in the CSS file on the site you refrence. You'll need to change the ID names accordingly.:
#-webkit-keyframes new_icon {
0% { -webkit-transform: translate(0px, 5px) ; }
100% { -webkit-transform: translate(0px, -15px); }
}
#-moz-keyframes new_icon {
0% { background-position: 0 0; }
100% { background-position: 0 600%; }
}
#lp-pom-image-350, #lp-pom-image-472, #lp-pom-image-473, #lp-pom-image-474, #lp-pom-image-475{
animation: new_icon 1s linear 0s infinite alternate;
-webkit-animation: new_icon 2s linear 0s infinite alternate;
}

You need to set up a css animation. The following one should do the trick:
#-webkit-keyframes bounce {
50% {
-webkit-transform(translateY(-30px));
}
100% {
-webkit-transform(translateY(0px));
}
}
/* For firefox and others than webkit based browsers */
#keyframes bounce {
50% {
transform(translateY(-30px));
}
100% {
transform(translateY(0px));
}
}
And then add this to the arrow class:
.your_arrow_class
{
-webkit-animation: bounce 2s linear 0s infinite alternate;
animation: bounce 2s linear 0s infinite alternate;
}

its because you would also need the animation set.
in this case the animation is called:
new_icon
for further information how it works read this about css3 animations
the new_icon animation would probably look like this:
so add this to your css ( don't forget to prefix it) and it should work.
#keyframes new_icon {
0% { top: 275px; }
100% { top: 300px; }
}
greetings timmi

Change initial style value with animation

I have an element
<form class="fade-in-form">...</form>
with an animation
.fade-in-login-form{
opacity: 0;
-webkit-animation: fadein 2s; !important;
-webkit-animation-delay: 3s; !important;
}
#-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1; !important;
}
}
and I want the element to be invisible at first, but then fading in.
The problem is that the form is invisible at first (opacity: 0;), then fades in, but after the animation flashes to be invisible again! Why doesn't the animation overwrite the initial value of opacity: 0; with opacity: 1;? And how can I achieve what I want?
If the solution requires Javascript: I prefer AngularJS over jQuery.

An animation by default only applies as long as it is running. When it ends running, it no longer applies
If you want to change this behaviour, you need to use the animation-fill-mode property
In your case, the value is forwards
animation-fill-mode: forwards;
(With prefixes if needed)

First, syntax-wise, I think you should not have a semi-colon between your values and !important (not a good one to use, by the way) :
-webkit-animation: fadein 2s !important;
Second, I guess the styles are not applied because your elements are not loaded ; if you set display to block on the form and set it back to block after page content is loaded with javascript (see code below), does it work better ?
document.addEventListener("DOMContentLoaded", function(event)
{
document.getElementById("form").style.display = "block";
});
codepen example

Just leave off the opacity: 0; in your first selector:
.fade-in-form {
-webkit-animation: fadein 2s 3s; /* Chrome, Opera 15+, Safari 5+ */
animation: fadein 2s 3s; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#-webkit-keyframes fadein {
0% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes fadein {
0% { opacity: 0.0; }
100% { opacity: 1.0; }
}
As #sodawillow mentioned try never ever to use !important but if you really have to use it like this: property-name: property-value !important;

How do I use CSS3 animate to move the background image of a div up and down?

<div class="abc">
</div>
.abc{
background: url("blah.jpg") no-repeat;
width:200px;
height:200px;
}
My background image is 200 x 600. How do I move it up and down the div (I want the div to remain 200x200, but the longer image goes up and down.)
I don't want to use Javascript to do this. (Because doing it that way won't use the hardware and will be slow.)

#keyframes bounce-background {
from {
background-position: top;
}
50% {
background-position: bottom;
}
to {
background-position: top;
}
}
.abc {
animation-name: bounce-background;
animation-timing-function: ease-in-out;
animation-duration: 2s;
animation-iteration-count: infinite;
/* For Chrome & Safari */
-webkit-animation-name: bounce-background;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
}
You should repeat these non-finalized CSS3 properties under vendor prefixes for the browsers you're supporting (e.g. #-moz-keyframes #-o-keyframes #-webkit-keyframes etc.).