jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

animation

Browse source
This commit is contained in:
Ilya Kantor 2017-03-22 00:04:08 +03:00
parent 97c8f22bbb
commit 3285348787
129 changed files with 732 additions and 693 deletions
Download patch file Download diff file Expand all files Collapse all files

16
5-animation/2-css-animations/digits-negative-delay.view/index.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
Click below to animate:
<div id="digit"><div id="stripe">0123456789</div></div>
<script src="script.js"></script>
</body>
</html>

5
5-animation/2-css-animations/digits-negative-delay.view/script.js Normal file
View file

@ -0,0 +1,5 @@
stripe.onclick = function() {
let sec = new Date().getSeconds() % 10;
stripe.style.transitionDelay = '-' + sec + 's';
stripe.classList.add('animate');
};

17
5-animation/2-css-animations/digits-negative-delay.view/style.css Normal file
View file

@ -0,0 +1,17 @@
#digit {
width: .5em;
overflow: hidden;
font: 32px monospace;
cursor: pointer;
}
#stripe {
display: inline-block
}
#stripe.animate {
transform: translate(-90%);
transition-property: transform;
transition-duration: 9s;
transition-timing-function: linear;
}