Blog Post: Sway CSS

Red Deer & Blackfalds Web Design Writes:

Here’s a funny bit of CSS that maybe you can use on your next/current website! The following is the HTML and CSS necessary to make objects on your website sway back and forth:

Example:

.sway {
-webkit-animation: sway 4s ease-in-out infinite alternate;
-moz-animation: sway 4s ease-in-out infinite alternate;
-o-animation: sway 4s ease-in-out infinite alternate;
animation: sway 4s ease-in-out infinite alternate;
}

@-moz-keyframes sway {
0% { -moz-transform: rotate(-15deg); }
100% { -moz-transform: rotate(15deg); }
}

@-webkit-keyframes sway {
0% { -webkit-transform: rotate(-15deg); }
100% { -webkit-transform: rotate(15deg); }
}

@-o-keyframes sway {
0% { -o-transform: rotate(-15deg); }
100% { -o-transform: rotate(15deg); }
}

@-ms-keyframes sway {
0% { -ms-transform: rotate(-15deg); }
100% { -ms-transform: rotate(15deg); }
}

@keyframes sway {
0% { transform: rotate(-15deg); }
100% { transform: rotate(15deg); }
}

By using the above CSS you can apply the class “sway” to your object/div/img and it will sway back and forth! Don’t be afraid to change the angles and timing ratio to suit your needs!

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)