Блондинка,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Математический маятник</title>
<style>
#a {
width: 255px;
height: 125px;
background: #cfe6cf;
border-radius: 15px/12px;
border: 1px solid #c0c0c0;
position: absolute;
}
#b {
width: 25px;
height: 100px;
display: inline-block;
position: absolute;
top: 15px;
left: 122.5px;
-webkit-transform-origin: 50% 0 ;
-moz-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
#a.anim #b {
-webkit-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
-moz-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
-o-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
-ms-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
animation: pendulum-1 1.79s linear 0s 1 normal forwards;
}
#c {
width: 1px;
height: 75px;
background: #999;
position: absolute;
left: 12px;
}
#d {
width: 1px;
height: 1px;
background: transparent;
border-top: 15px solid #000080;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
left: 120px;
}
#U_2e {
width: 25px;
height: 25px;
display: inline-block;
border-radius: 50%;
background: -moz-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
background: -webkit-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
background: -o-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
background: -ms-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
background: radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
position: absolute;
top: 75px;
}
@-webkit-keyframes pendulum-1 {
0% {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
} 100% {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@-moz-keyframes pendulum-1 {
0% {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
} 100% {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@-o-keyframes pendulum-1 {
0% {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
} 100% {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@-ms-keyframes pendulum-1 {
0% {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
} 100% {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@keyframes pendulum-1 {
0% {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
} 100% {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
</style>
</head>
<body>
<div id="a" class="anim">
<span id="d"></span>
<span id="b">
<span id="c"></span>
<span id="U_2e"></span>
</span>
</div>
<script>
var a = document.querySelector("#a");
a.addEventListener("click", function() {
a.classList.remove("anim");
document.documentElement.clientWidth;
a.classList.add("anim");
});
</script>
</body>
</html>