Improved animations
This commit is contained in:
parent
29e6529b51
commit
9543272edb
|
@ -26,6 +26,18 @@
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
animation-delay: 2s;
|
animation-delay: 2s;
|
||||||
}
|
}
|
||||||
|
svg:hover #up{
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: sliceup;
|
||||||
|
}
|
||||||
|
svg:hover #down{
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: slicedown;
|
||||||
|
}
|
||||||
|
svg:hover #shrink{
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: shrinking;
|
||||||
|
}
|
||||||
@keyframes blue{
|
@keyframes blue{
|
||||||
0%{
|
0%{
|
||||||
fill:#F0F0F0;
|
fill:#F0F0F0;
|
||||||
|
@ -59,14 +71,48 @@
|
||||||
fill:#F0F0F0;
|
fill:#F0F0F0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@keyframes sliceup{
|
||||||
|
0%{
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
transform: translate(0, -10px);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes slicedown{
|
||||||
|
0%{
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
transform: translate(0, 10px);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes shrinking{
|
||||||
|
0%{
|
||||||
|
transform: scale(1, 1);
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
transform: scale(0.9, 1);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: scale(1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<body>
|
<body>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="225" width="225">
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="225" width="225">
|
||||||
<g transform="translate(55,37)" id="content">
|
<g transform="translate(55,37)" id="content">
|
||||||
|
<g id="shrink">
|
||||||
<rect id="yellow" ry="5" rx="5" y="0" x="0" height="150" width="50" fill="white" />
|
<rect id="yellow" ry="5" rx="5" y="0" x="0" height="150" width="50" fill="white" />
|
||||||
<rect id="blue" ry="5" rx="5" y="0" x="65" height="90" width="50" fill="white" />
|
<g id="up"><rect id="blue" ry="5" rx="5" y="0" x="65" height="90" width="50" fill="white" /></g>
|
||||||
<circle id="red" r="25" cy="125" cx="90" fill="white" />
|
<g id="down"><circle id="red" r="25" cy="125" cx="90" fill="white" /></g>
|
||||||
</g>
|
</g></g>
|
||||||
</svg>
|
</svg>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Reference in New Issue