Premise:
Ok Tidwell, your OpenGL article was pretty cool but I want to see something with a smaller footprint that still makes some cool animations yet doesn't take a ton of code and still can be used in most any OS environment (tablet/desktop/phone/etc...). Time to check out animations using css3. Remember way back when when Peter discussed/coded about css3 transforms? Time to use a bit of his code along with some of my own css blog code I wrote last year.
Let's code!
I won't go too advanced this go around, I'm in the mood to make a simple square of color move around in a pattern and change colors as it moves. If I set my timing right you could turn on Pink Floyd at a certain point and experience the magic :). But enough about that, lets write some code!
Let's use one simple div tag to do our bidding, for this test purpose I'll embed the css directly into the my html sample (not quite a clean way to do it) versus making a .css file and calling from that route (more functional and easier to use in multiple html files).
One of the easier ways to try animations in css3 is to use the keyframes method. The basic concept is you define the keyframe waypoint at each step of the animation and the css3 takes over the hard part in the backend to make each transition. Want to turn an orange square to a green square, then to purple, pink, and back to orange within a moving block? The sample below covers it! Due to browser weirdness you'll have to create two sections to do the animations, one set handles Chrome/Safari/Opera, the other handles IE.
No screenshots this time around, fire the above code up in any decent modern browser (your call, but IE 10 or higher if you're using that one).
Next time I'll take the same code above and make a few minor tweaks here and there to make the animation do something similar but quite different.
One of the easier ways to try animations in css3 is to use the keyframes method. The basic concept is you define the keyframe waypoint at each step of the animation and the css3 takes over the hard part in the backend to make each transition. Want to turn an orange square to a green square, then to purple, pink, and back to orange within a moving block? The sample below covers it! Due to browser weirdness you'll have to create two sections to do the animations, one set handles Chrome/Safari/Opera, the other handles IE.
<!DOCTYPE html>
<html>
<head>
<title>ph3@r m3 l33t c0d3z!</title>
</head>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
-webkit-animation-name: movingSquareChangingColors; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-name: movingSquareChangingColors;
animation-duration: 4s;
animation-delay: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes movingSquareChangingColors {
0% { background-color:orange; left:0px; top:0px; }
25% { background-color:green; left:200px; top:0px; }
50% { background-color:purple; left:200px; top:200px; }
75% { background-color:pink; left:0px; top:200px; }
100% { background-color:orange; left:0px; top:0px; }
}
/* Standard syntax */
@keyframes movingSquareChangingColors {
0% { background-color:orange; left:0px; top:0px; }
25% { background-color:green; left:200px; top:0px; }
50% { background-color:purple; left:200px; top:200px; }
75% { background-color:pink; left:0px; top:200px; }
100% { background-color:orange; left:0px; top:0px; }
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
The result:
No screenshots this time around, fire the above code up in any decent modern browser (your call, but IE 10 or higher if you're using that one).
Next time I'll take the same code above and make a few minor tweaks here and there to make the animation do something similar but quite different.
Hello, an amazing Information dude. Thanks for sharing this nice information with us. Antigen Covid Test
ReplyDelete