﻿@-webkit-keyframes col{ 0%{-webkit-transform: translateX(1200px);color:red;} 100%{-webkit-transform: translateX(0px);color:#36a;} }
@-moz-keyframes col{ 0%{-moz-transform: translateX(1200px);color:red;} 100%{-moz-transform: translateX(0px);color:#36a;} }
@-o-keyframes col{ 0%{-o-transform: translateX(1200px);color:red;} 100%{-moz-transform: translateX(0px);color:#36a;} }

@-webkit-keyframes spin{ 0%{visibility:hidden;-webkit-transform: rotate(-720deg) translateY(-200px);font-size:40pt;} 80%{visibility:hidden;-webkit-transform: rotate(-720deg) translateY(0px);font-size:40pt;} 100% {-webkit-transform: rotate(20deg) translateY(0px);font-size:18pt;} }
@-moz-keyframes spin{ 0%{visibility:hidden;-moz-transform: rotate(-720deg) translateY(-200px);font-size:40pt;} 80%{visibility:hidden;-moz-transform: rotate(-720deg) translateY(0px);font-size:40pt;} 100% {-moz-transform: rotate(20deg) translateY(0px);font-size:18pt;} }
@-o-keyframes spin{ 0%{visibility:hidden;-o-transform: rotate(-720deg) translateY(-200px);font-size:40pt;} 80%{visibility:hidden;-o-transform: rotate(-720deg) translateY(0px);font-size:40pt;} 100% {-o-transform: rotate(20deg) translateY(0px);font-size:18pt;} }

h2.top{
margin-top:20px;
-webkit-animation-name: col;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0,0.1,0.2,0.5,1.0);
-webkit-animation-iteration-count: 1;
-moz-animation-name: col;
-moz-animation-duration: 1s;
-moz-animation-timing-function: cubic-bezier(0,0.1,0.2,0.5,1.0);
-moz-animation-iteration-count: 1;
-o-animation-name: col;
-o-animation-duration: 1s;
-o-animation-timing-function: cubic-bezier(0,0.1,0.2,0.5,1.0);
-o-animation-iteration-count: 1;
}

div.append{
margin:-15px 0 20px 40px;
width:120px;
font-size:18pt;
font-weight:bold;
color:red;
text-shadow:2px 2px 1px #555;
-webkit-transform: rotate(10deg) ;
-moz-transform: rotate(10deg) ;
-o-transform: rotate(10deg) ;
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-moz-animation-name: spin;
-moz-animation-duration: 3s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: 1;
-o-animation-name: spin;
-o-animation-duration: 3s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: 1;
}

.element{
padding:2px;
background-color:#def;
border:1px gray solid;
border-radius:5px;
font-weight:bold;
color:#555;
}

math{
font-size:16pt;
}

