CSS is amazing, it allows you to do a lot without the need of javascript, I use it to keep responsiveness of a website, for example.. But, I also like to add fancy, pure decoration effects.
Let's see some examples...
CSS Animated examples
By just usng CSS, see what can be done...
Bouncing, or jump effect using animation and text-shadow.
This is done using text-shadow and animation applied to it.
Each line of the animation below represents a 'frame' of the animation, that goes from 0 to 100%, and actually it represent the percentage of the total animation time (that is set within the css of the element to animate)
@keyframes bounce {
0% {text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.88);}
20% {text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.88);}
40% {text-shadow: 7px 7px 7px rgba(0, 0, 0, 0.88);}
50% {text-shadow: 8px 8px 8px rgba(0, 0, 0, 0.88);}
70% {text-shadow: 7px 7px 7px 4px rgba(0, 0, 0, 0.88);}
90% {text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.88);}
100% {text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.88);}
}
And this is the CSS applied to the element you want to "bounce", or animate.
.bouncer {
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Hover Underline effect
This is done using text-shadow and animation applied to it.
Each line of the animation below represents a 'frame' of the animation, that goes from 0 to 100%, and actually it represent the percentage of the total animation time (that is set within the css of the element to animate)
li.menu-item a:after {
content: "";
position: absolute;
width: 120%;
height: 2px;
bottom: 24px;
left: -10%;
background: #e7308c;
transform: scalex(0);
transition: .2s;
}
li.menu-item a:hover:after {
content: "";
position: absolute;
width: 120%;
height: 2px;
bottom: 24px;
left: -10%;
background: #e7308c;
transform: scalex(1);
transition: .2s;
}