CSS – Animation with cross browser compatibility.
The Source Code to copy/paste:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .animation:hover { -webkit-animation: myanim 5 s infinite; /* Chrome, Safari 5+ */ -moz-animation: myanim 5 s infinite; /* Firefox 5-15 */ -o-animation: myanim 5 s infinite; /* Opera 12.00 */ animation: myanim 5 s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */ } @-webkit-keyframes myanim { 0% { opacity: 0.0 ; } 50% { opacity: 0.5 ; } 100% { opacity: 1.0 ; } } @-moz-keyframes myanim { 0% { opacity: 0.0 ; } 50% { opacity: 0.5 ; } 100% { opacity: 1.0 ; } } @-o-keyframes myanim { 0% { opacity: 0.0 ; } 50% { opacity: 0.5 ; } 100% { opacity: 1.0 ; } } @keyframes myanim { 0% { opacity: 0.0 ; } 50% { opacity: 0.5 ; } 100% { opacity: 1.0 ; } } |