Home » Up and Down animation – CSS3

Up and Down animation – CSS3

As you people would know that it is now possible to make animation from CSS3 as well. And we can make some easy and simple animations with the help of CSS3.

Let us see some similar example in which you can animate any object or div below.

It is very easy. You just need to apply some properties of CSS3.
This code is also for those who are not technical. Just apply & enjoy 🙂

				
					img.up-down{
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
img.up-down{
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}
				
			

Example:

About Author
Picture of W3Mind

W3Mind

W3Mind focuses on Blogging, Make Money Online, SEO, Business Blogging, Social Media, WordPress, Internet Tools, Web Design and Development.
Give it a Share
Facebook
Twitter
LinkedIn
You May Also Like
How to
START A
BLOG
(step by step)
Load WordPress Sites in as fast as 37ms!