public
Last active

Animation without 0% or 100% keyframes

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13
/* Animation without 0% or 100% keyframes */
/* @estellevw sez this can sometimes be buggy */
/* ref: https://twitter.com/estellevw/status/40528526541066240 */
@keyframes middling {50% {background-color: #777;}}
div {
width: 144px;
height: 48px;
margin: 24px;
border: 5px solid #999;
border-radius: 5px;
padding: 3px;
}
div:hover {animation: middling 3s;}
dabblet.html
HTML
1 2 3
<h1>Animation with no 0% or 100% keyframes</h1>
<div>hover me</div>
<p>Works as expected in Chrome 16, Safari 5.1.2, Firefox 9</p>
settings.json
JSON
1
{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.