Believe it or not, this image of an adorable dog is fading in and out with only CSS and HTML (and then screen captured to put in this article). I?ll explain how.
If you have ever used video editing software ? whether it?s Windows Movie Maker or Adobe Premiere Pro ? then you are most likely familiar with the fade-in and fade-out video transitions. They?re extremely effective for creating a nice and polished feel, and there?s no reason why you shouldn?t be able to have that in your arsenal when you?re programming web applications.
Fading In
This cat staring into the distance looks much more epic when you incorporate a CSS fade-in effect.
In order to fade your image from transparent to full opacity, first paste the following code into your CSS block.
.fade-in { animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 10s; -moz-animation: fadeIn ease 10s; -o-animation: fadeIn ease 10s; -ms-animation: fadeIn ease 10s;}@keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; }}@-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; }}@-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; }}@-o-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; }}@-ms-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1;}
In fade-in, you can change 10s to any multiple of seconds that you desire. A 10 second fade is somewhat slow, so if you want a faster fade, you can try something in a lower range. I recommend experimenting with it until you achieve the effect you desire.
Dev Tips: Searching GitHub like a Pro
Save time on struggling through documentation by searching GitHub for real code by real people.
medium.com
Also, note that -webkit, -moz, -o, and -ms are vendor prefixes that allow you to ensure that the code works across different browsers (like between Google Chrome and Mozilla Firefox, for example). It?s admittedly annoying to maintain duplicated CSS code for each, but it?s important to bring consistency for your end users no matter the browser they may use.
Lastly, you can just refer to the fade-in class in one of your HTML tags to make sure it takes in the CSS code you pasted in:
<div class=”fade-in”> <img src=”../images/epic-cat-picture.png”></div>
In this example, everything within the scope of the <div class=”fade-in”> tag will fade in with a transition time of 10 seconds.
Fading Out
Goodbye, my sweet finch.
In order to fade an HTML element out, then paste the following code in your CSS block:
.fade-out { animation: fadeOut ease 8s; -webkit-animation: fadeOut ease 8s; -moz-animation: fadeOut ease 8s; -o-animation: fadeOut ease 8s; -ms-animation: fadeOut ease 8s;}@keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; }}@-moz-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; }}@-webkit-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; }}@-o-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; }}@-ms-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0;}
The main change is making the 0% (start) options have an opacity of 1 (the maximum value) and then the 100% (end) options have an opacity of 0 (the minimum value). That would technically be enough, but changing fadeIn to fadeOut from the previous example makes sure you know in plain English exactly what?s happening.
What is the best IDE for developing in Golang?
What should you use to edit your Go code? I compare the options.
medium.com
Again, you?d have to explicitly use the CSS code in your HTML classes:
<div class=”fade-out”> <img src=”../images/little-bird-picture.png”></div>
In this example, the bird is fading out over the course of 8 seconds.
Animating HTML elements with CSS without any external libraries or files is awesome, so I hope you enjoyed this one!
