If you are one of those people who prefers watching a video of a technical topic such as this, look no further:
If you have the time, you should read the tutorial as well. The text does go into a bit more detail, and I find copying and pasting code to be a lot more fun than pausing a video and writing the characters by hand...like an animal!
My fellow reader, take look at the following example:
[ I don’t care what anybody says, I think it looks cute ]
If you are on a browser that supports CSS3 animations, you will see two clouds happily moving around inside a container.
The CSS for all of this looks as follows:
#mainContent {
background-color: #A2BFCE;
border-radius: 4px;
padding: 10px;
width: 350px;
height: 200px;
overflow: hidden;
}
.cloud {
position: absolute;
}
#bigcloud {
animation-name: bobble;
animation-duration: 2s;
animation-iteration-count: infinite;
-ms-animation-name: bobble;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-moz-animation-name: bobble;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-o-animation-name: bobble;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
-webkit-animation-name: bobble;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
#littlecloud {
animation-name: bobble;
animation-duration: 4s;
animation-iteration-count: infinite;
-ms-animation-name: bobble;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-moz-animation-name: bobble;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-o-animation-name: bobble;
-o-animation-duration: 4s;
-o-animation-iteration-count: infinite;
-webkit-animation-name: bobble;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
margin-top: 50px;
margin-left: 100px;
}
@keyframes bobble {
0% {
left: 50px;
top: 40px;
animation-timing-function: ease-in;
}
50% {
left: 50px;
top: 50px;
animation-timing-function: ease-out;
}
100% {
left: 50px;
top: 40px;
animation-timing-function: ease-in;
}
}
@-ms-keyframes bobble {
0% {
left: 50px;
top: 40px;
-ms-animation-timing-function: ease-in;
}
50% {
left: 50px;
top: 50px;
-ms-animation-timing-function: ease-out;
}
100% {
left: 50px;
top: 40px;
-ms-animation-timing-function: ease-in;
}
}
@-moz-keyframes bobble {
0% {
left: 50px;
top: 40px;
-moz-animation-timing-function: ease-in;
}
50% {
left: 50px;
top: 50px;
-moz-animation-timing-function: ease-out;
}
100% {
left: 50px;
top: 40px;
-moz-animation-timing-function: ease-in;
}
}
@-webkit-keyframes bobble {
0% {
left: 50px;
top: 40px;
-webkit-animation-timing-function: ease-in;
}
50% {
left: 50px;
top: 50px;
-webkit-animation-timing-function: ease-out;
}
100% {
left: 50px;
top: 40px;
-webkit-animation-timing-function: ease-in;
}
}
@-o-keyframes bobble {
0% {
left: 50px;
top: 40px;
-o-animation-timing-function: ease-in;
}
50% {
left: 50px;
top: 50px;
-o-animation-timing-function: ease-out;
}
100% {
left: 50px;
top: 40px;
-o-animation-timing-function: ease-in;
}
}
Holy smokes! That is a lot of CSS. If you pay closer attention, you'll find that most of the CSS is just duplicated.
The reason for this duplication has to do with browser support. A lot of the new CSS3 features are officially supported in the latest version of the popular browsers, but older browsers don't support them officially. In order to have these new features work on these older browsers, one needs to duplicate the declarations with the appropriate vendor prefix for Internet Explorer (-ms), Chrome/Safari (-webkit), Firefox (-moz), and Opera (-o). If you miss a vendor prefix variation, you risk your CSS being ignored by browsers that listen to that prefix.
Having all of this duplicated markup is problematic for several reasons:
Fortunately, Lea Verou created an elegant solution that solves this problem. Meet the excellent -prefix-free library that takes your normal un-prefixed CSS and, at runtime, creates the appropriate vendor prefixes that the browser knows what to do with.
This means you no longer have to provide multiple copies of various style rules and declarations for multiple browsers. Just provide a single un-prefixed version and call it a day.
Below is a version of the bouncing clouds example without having the extraneous duplicated CSS:
#mainContent {
background-color: #A2BFCE;
border-radius: 4px;
padding: 10px;
width: 350px;
height: 200px;
overflow: hidden;
}
.cloud {
position: absolute;
}
#bigcloud {
animation-name: bobble;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#littlecloud {
animation-name: bobble;
animation-duration: 4s;
animation-iteration-count: infinite;
margin-top: 50px;
margin-left: 100px;
}
@keyframes bobble {
0% {
left: 50px;
top: 40px;
animation-timing-function: ease-in;
}
50% {
left: 50px;
top: 50px;
animation-timing-function: ease-out;
}
100% {
left: 50px;
top: 40px;
animation-timing-function: ease-in;
}
}
By using -prefix-free, the above CSS ends up working in all of the major browsers without me having to do anything extra.
The end result is that you have clean and maintainable markup. Your users can view your CSS3 content if the browser supports it. If a browser such as Opera supports new stuff in the future, this library makes your content future proof as well.
To use this library on your sites, all you have to do is:
You can see an example of this library at use in the following link:
Bouncing Clouds using -prefix-free. Just view the source to see both
the clean CSS as well as the script reference to -prefix-free.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
:: Copyright KIRUPA 2024 //--