Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animation values are strongest !
/**
* Animation values are strongest !
*/
/*
* just hover the white space to stop the animation
* and and return the block to its original coordinates
*/
html,body { height:100%; }
div {
position: absolute;
top:0; left:0;
width: 100px; height: 100px;
background: #999;
animation: 10s anim infinite;
transition: all 2s; /* see the block back to its original coordinates, and back again in last "animation" coordinates*/
}
@keyframes anim {
0%, 100% { left: 0; top:0; }
25% { left: 200px; top:0 }
50% { left: 200px; top:200px }
75% { left:0; top:200px; }
}
body:hover div {
animation-play-state: paused;
top:0 !important; left:0 !important;
background: #ff9999;
}
<div>&nbsp;</div>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.