about 9 years ago
While applying animation to an object in MS Powerpoint, you might have picked some predefined entrance effects like bounce, flash, shake, wobble, etc.
We can apply these effects to our HTML elements in webpages as well. These can be implemented by CSS 3 Animation property.
Below are some entrance examples.
Bounce Effect
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .bounce { animation-name: bounce; }
Pulse Effect
@keyframes pulse { 0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); } }
.pulse { animation-name: pulse; }
Swing Effect
@keyframes swing { 20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); } }
.swing { transform-origin: top center; animation-name: swing; }
Wobble Effect
@keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); } }
.wobble { animation-name: wobble; }
Note: In order to execute above animation in Google Chrome & Safari, you have to put suffix -webkit- before each CSS3 property used for animation.
Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).
Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.
Chrome Version Support
Are you sure, you want to delete this comment?
Sign up using
0 Comment(s)