User:Alec2435/style.css
Jump to navigation
Jump to search
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
#animated_div
{
width:20%;
animation:animated_div 5s 1;
position:relative;
border-radius:5px;
-webkit-border-radius:5px;
animation-iteration-count: infinite;
}
@keyframes animated_div
{
0% {transform: rotate(0deg);left:0%;}
25% {transform: rotate(20deg);left:5%;}
50% {transform: rotate(0deg);left:90%;}
55% {transform: rotate(0deg);left:90%;}
70% {transform: rotate(0deg);left:90%;}
100% {transform: rotate(-360deg);left:0%;}
}
<!--@-webkit-keyframes animated_div
{
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(20deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:500px;}
55% {-webkit-transform: rotate(0deg);left:500px;}
70% {-webkit-transform: rotate(0deg);left:500px;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}
@-moz-keyframes animated_div
{
0% {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(20deg);left:0px;}
50% {-moz-transform: rotate(0deg);left:500px;}
55% {-moz-transform: rotate(0deg);left:500px;}
70% {-moz-transform: rotate(0deg);left:500px;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}
@-o-keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;}
100% {transform: rotate(-360deg);left:0px;}
}-->