forked from mirrors/gecko-dev
170 lines
3.1 KiB
HTML
170 lines
3.1 KiB
HTML
<!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>
|