Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<style>
.not-animated {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background: #eee;
}
.simple-animation {
display: inline-block;
width: 64px;
height: 64px;
border-radius: 50%;
background: red;
animation: move 200s infinite;
}
.multiple-animations {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background: #eee;
animation: move 200s infinite , glow 100s 5;
animation-timing-function: ease-out;
animation-direction: reverse;
animation-fill-mode: both;
}
.transition {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background: #f06;
transition: width 500s ease-out;
}
.transition.get-round {
width: 200px;
}
.long-animation {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background: gold;
animation: move 100s;
}
.short-animation {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background: purple;
animation: move 1s;
}
.delayed-animation {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background: rebeccapurple;
animation: move 200s 5s infinite;
}
.delayed-transition {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background: black;
transition: width 500s 3s;
}
.delayed-transition.get-round {
width: 200px;
}
.delayed-multiple-animations {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background: green;
animation: move .5s 1s 10, glow 1s .75s 30;
}
.multiple-animations-2 {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background: blue;
animation: move .5s, glow 100s 2s infinite, grow 300s 1s 100;
}
.all-transitions {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
background: blue;
transition: all .2s;
}
.all-transitions.expand {
width: 200px;
height: 100px;
}
@keyframes move {
100% {
transform: translateY(100px);
}
}
@keyframes glow {
100% {
background: yellow;
}
}
@keyframes grow {
100% {
width: 100px;
}
}
</style>
<div class="not-animated"></div>
<div class="simple-animation"></div>
<div class="multiple-animations"></div>
<div class="transition"></div>
<div class="long-animation"></div>
<div class="short-animation"></div>
<div class="delayed-animation"></div>
<div class="delayed-transition"></div>
<div class="delayed-multiple-animations"></div>
<div class="multiple-animations-2"></div>
<div class="all-transitions"></div>
<script type="text/javascript">
"use strict";
// Get the transitions started when the page loads
addEventListener("load", function() {
document.querySelector(".transition").classList.add("get-round");
document.querySelector(".delayed-transition").classList.add("get-round");
});
</script>