-
Notifications
You must be signed in to change notification settings - Fork 0
/
animation-transform.html
88 lines (77 loc) · 2.72 KB
/
animation-transform.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Transform</title>
<style>
/* The transform CSS property lets you rotate, scale,
skew, or translate an element.
Transform is often used with animations because it does
not affect layout of other elements on the page.
Similar to position relative, elem takes up its original place in the document flow,
but all movement from transform is not reflected in the document flow.
*/
.div {
--scale: 1.5;
--margin: 2rem;
background-color: red;
height: 100px;
width: 100px;
color: white;
animation-name: custom;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 4;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-delay: 0.5s;
/* scale: x-dimension, y-dimension */
/* transform: scale(1, 1.5); */
/* transform: scaleX(1) scaleY(1.5); */
/* rotate: deg, turns, radians */
/* 1rad = 57.3 degrees */
/* transform: rotate(45deg); */
/* transform: rotate(0.75turn); */
/* transform: rotate(1rad); */
/* origin sets the origin for an element's transformations. */
/* transform-origin: center | top left | bottom right | 50px 50px | etc. | */
/* translate: x-direction, y-direction */
/* transform: translate(10px, 50px); */
/* transform: translateX(10px) translateY(50px); */
/* percentage is based on size of element translated,
not size of parent element */
/* transform: translate(100%, 200%); */
/* TIP: use percentage to center an element */
/* only half the div now appears on page */
/* transform: translate(-50%); */
}
.div:hover {
animation-play-state: paused;
}
@keyframes custom {
/* move element back and forth along x-axis, its own width */
/* TIP: use CSS variables when modifying a transform,
more predictable and easier to manage
however, sometimes transform is not able to animate
CSS variable, in which case use explicit values
*/
from {
margin: var(--margin);
transform: translateX(0) scale(var(--scale));
}
to {
margin: var(--margin);
transform: translateX(100%) scale(var(--scale));
}
}
</style>
</head>
<body>
<div class="div">Div</div>
<div>Div</div>
<div>Div</div>
<div>Div</div>
</body>
</html>