mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
196 lines
3.7 KiB
HTML
196 lines
3.7 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: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: red;
|
|
|
|
animation: move 2s infinite;
|
|
}
|
|
|
|
.multiple-animations {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: #eee;
|
|
|
|
animation: move 2s infinite, glow 1s 5;
|
|
}
|
|
|
|
.transition {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: #f06;
|
|
|
|
transition: width 5s;
|
|
}
|
|
.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 2s 5s infinite;
|
|
}
|
|
|
|
.delayed-transition {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: black;
|
|
|
|
transition: width 5s 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 1s 2s infinite, grow 3s 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;
|
|
}
|
|
}
|
|
|
|
.script-generated {
|
|
display: inline-block;
|
|
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background-color: black;
|
|
background-image:
|
|
repeating-linear-gradient(45deg, transparent 0, transparent 5px, #f06 5px, #f06 10px);
|
|
border: 5px solid #f06;
|
|
box-sizing: border-box;
|
|
}
|
|
</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>
|
|
<div class="script-generated"></div>
|
|
<script type="text/javascript">
|
|
// Get the transitions started when the page loads
|
|
var players;
|
|
addEventListener("load", function() {
|
|
document.querySelector(".transition").classList.add("get-round");
|
|
document.querySelector(".delayed-transition").classList.add("get-round");
|
|
|
|
// Create a script-generated animation.
|
|
var animation = document.querySelector(".script-generated").animate({
|
|
backgroundColor: ["black", "gold"]
|
|
}, {
|
|
duration: 500,
|
|
iterations: Infinity,
|
|
direction: "alternate"
|
|
});
|
|
animation.id = "custom-animation-name";
|
|
|
|
// Add a custom animation id to an existing css animation.
|
|
document.querySelector(".delayed-animation")
|
|
.getAnimations()[0].id = "cssanimation-custom-name";
|
|
});
|
|
</script>
|