Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:FlashyCSS: Difference between revisions

Template page
Arin Mara (talk | contribs)
Extracted flashy CSS used for animating icons for better maintainability
 
Standard animation CSS is widely supported. Old vendor compatibility prefixes seem to have broken the flashy, removed them to fix it.
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
{{#css:
{{#css:
@keyframes flashy { 50% { opacity: 0; } }
@keyframes flashy { 50% { opacity: 0; } }
@-webkit-keyframes flashy { 50% { opacity: 0; } }
@-moz-keyframes flashy { 50% { opacity: 0; } }
@-o-keyframes flashy { 50% { opacity: 0; } }
.flashy img {
.flashy img {
     animation-name: flashy;
     animation-name: flashy;
Line 10: Line 7:
     animation-iteration-count: infinite;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-direction: alternate;
    -webkit-animation-name: flashy;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-name: flashy;
    -moz-animation-duration: .5s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -o-animation-name: flashy;
    -o-animation-duration: .5s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;
}
}
}}<noinclude>
}}<noinclude>
{{documentation}}
{{documentation}}
<noinclude>
</noinclude>