div.box {
width: 100px;
height: 100px;
background-color: aqua;
transition: width 2s ease-in-out 1s;
/*
transition: width 1s ease-in;
transition: width 2s, height 2s;
*/
}
div.box:hover {
width: 200px;
}
/* ANIMACJE */
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
@keyframe colorswitch {
from {background-color: red; width: 100px;}
to {background-color: green; width: 200px;}
}
div.colorswap {
width: 100px;
height: 100px;
background: red;
animation-name: colorswitch;
animation-duration: 4s;
}
@keyframe colorswitch {
0% {background-color: red; width: 100px;}
50% {background-color: yellow; width: 100px;}
100% {background-color: green; width: 200px;}
}