OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <style> | |
3 div { | |
4 width: 100px; | |
5 height: 100px; | |
6 border: solid; | |
7 margin: 50px; | |
8 position: absolute; | |
9 will-change: transform; | |
10 transform-origin: 0 0; | |
11 } | |
12 | |
13 #test { | |
14 border-color: green; | |
15 | |
16 animation-name: anim; | |
17 animation-duration: 2e10s; | |
18 animation-delay: -1e10s; | |
19 animation-fill-mode: forwards; | |
20 animation-timing-function: linear; | |
21 } | |
22 | |
23 @keyframes anim { | |
24 0% { | |
25 transform: skew(0deg, 0deg); | |
26 } | |
27 100% { | |
28 transform: skew(-90deg, 90deg); | |
alancutter (OOO until 2018)
2015/09/03 04:25:14
The from and to keyframes can both be skew(-45deg,
| |
29 } | |
30 } | |
31 | |
32 #expected { | |
33 border-color: red; | |
34 transform: skew(-45deg, 45deg); | |
alancutter (OOO until 2018)
2015/09/03 04:25:14
Perhaps if the -expected.html was also running a c
| |
35 } | |
36 </style> | |
37 | |
38 The green test div should transform to cover the red target. | |
39 <div id="expected"></div> | |
40 <div id="test"></div> | |
OLD | NEW |