exemples-javascript/animation.html at master · eaa-imd/exemples-javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html>
    <head>
        <title>animation</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>

            body {
                font-family: "Roboto Mono", sans-serif;
                font-size: 120%;
                margin: 0;
                height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
            }

			.object, .focus {
				padding: 0.1em;
                border: 2px solid red;
                width: 5em;
                height: 5em;
                background: #ddd;
                margin: auto;

                display: flex;
                align-items: center;
                justify-content: center;

			}

			button {
				width: 5em;
				display: block;
				margin: auto;
				font-family: "Roboto Mono", sans-serif;
                font-size: 100%;
			}

			.object:hover, .runpulse {
				animation-name: pulse;
				animation-duration: 1s;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
			}

			.focus:focus, .runfocus {
				animation-name: grow;
				animation-duration: 1s;
				animation-iteration-count: 1;
				animation-fill-mode: both;
			}

			@keyframes grow {

				to {
					transform: scale(1.2);
					transform: translateX(25px) rotate(-45deg);
					background-color: green;
					color: white;
				}
			}

			@keyframes pulse {
			    0%, 100% {
			        background-color: #ddd;
			    }
			    50% {
			        transform: scale(1.5) rotate(90deg);
			        background-color: orange;
			    }
			    100% {
			        transform: scale(1) rotate(180deg);
			    }
			}


        </style>
    </head>
    <body>

        <div class="object">
			:hover
        </div>

        <a href="#" class="focus">:focus</a>

        <button class="button">run</button>

        <script>

        	document.querySelector("button").addEventListener( "click", function(){

        		var o = document.querySelector(".object");

        		var f = document.querySelector(".focus");

        		// Launch animation with JavaScript!

        		o.style.animationName = "pulse";
        		o.style.animationDuration = "1s";
        		o.style.animationIterationCount = "infinite";
        		o.style.animationTimingFunction = "linear";

        		// f.style.animationName = "grow";
        		// f.style.animationDuration = "1s";
        		// f.style.animationIterationCount = "1";
        		// f.style.animationFillMode = "both";

        		// Another method: add class "runpulse"
				f.className += " runfocus";

        	});

        </script>
    </body>
</html>