An exciting Journey into Thai Culture
For my students. It will be explained in class
Note that adding a page height will stop the page from expanding with the animation. (it has not been added on this page but the code is there in the section style)
Note that adding a page height will stop the page from expanding with the animation. (it has not been added on this page but the code is there in the section style)
<section style="height: 450px;"><div id="anim_box">
An exciting Journey into Thai Culture
</div></section>
An exciting Journey into Thai Culture
</div></section>
/*---------start-------------------- animated box----------------------------*/
#anim_box {
width: 100px;
height: 100px;
color: white;
margin: 20px;
text-align: center;
border: 1px solid black;
padding: 15px;
font-size: 24px;
-webkit-animation: demo 18s infinite ease;
animation: demo 4s infinite ease linear;
position: relative;
}
@-webkit-keyframes demo {
0% {
left: 0%;
background: blue;
border-radius: 5px;
font-size: 6px;
}
20% {
left: 5%;
background: blue;
border-radius: 45px;
font-size: 6px;
}
30% {
background: green;
border-radius: 120px;
font-size: 20px;
width: 200px;
text-shadow: 2px 2px 0px black;
}
40% {
left: 210px;
background: blue;
border-radius: 5px;
width: 350px;
font-size: 36px;
box-shadow: inset 0px 0px 50px yellow, 0px 0px 1px black;
text-shadow: 1px 1px 2px black;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
left: 210px;
background: blue;
border-radius: 5px;
width: 350px;
font-size: 36px;
text-shadow: 4px 4px 4px black;
box-shadow: 9px 9px 15px black;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
/*---------end-------------------- animated box----------------------------*/
#anim_box {
width: 100px;
height: 100px;
color: white;
margin: 20px;
text-align: center;
border: 1px solid black;
padding: 15px;
font-size: 24px;
-webkit-animation: demo 18s infinite ease;
animation: demo 4s infinite ease linear;
position: relative;
}
@-webkit-keyframes demo {
0% {
left: 0%;
background: blue;
border-radius: 5px;
font-size: 6px;
}
20% {
left: 5%;
background: blue;
border-radius: 45px;
font-size: 6px;
}
30% {
background: green;
border-radius: 120px;
font-size: 20px;
width: 200px;
text-shadow: 2px 2px 0px black;
}
40% {
left: 210px;
background: blue;
border-radius: 5px;
width: 350px;
font-size: 36px;
box-shadow: inset 0px 0px 50px yellow, 0px 0px 1px black;
text-shadow: 1px 1px 2px black;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
left: 210px;
background: blue;
border-radius: 5px;
width: 350px;
font-size: 36px;
text-shadow: 4px 4px 4px black;
box-shadow: 9px 9px 15px black;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
/*---------end-------------------- animated box----------------------------*/