CSS ANIMATION : Animation – OUT OF THE BOX

The animation property

The keyframe property

How to get this code working on this page ?

De oplossing is vermoedelijk een stylesheet bijvoegen maar dat lijkt me best iets voor morgen.

body {
padding: 50px;
}

#box {
background: goldenrod;
display: inline-block;
width: 200px;
height: 200px;
position: relative; /*why relative ? */
animation: myframes 2s ease-in-out 0s infinite;
}

@keyframes myframes {
from {
height: 200px;
}
to {
height: 600px;
}
}
/* deze doet niet mee, nergens vernoemd */
@keyframes myframesfunky {
0% {
height: 200px;
}
30%, 100% {
width: 400px;
}
70% {
height: 600px;
background: orange;
}
}

HTML blijft de eenvoud zelve.

<div id="box"></div>