testbed/index.html at master · dlibby-/testbed · 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
<style>
  img {
    transition: all 2s linear;
    transform: rotate(0deg)  scale(0.25)  skew(0deg)  translate(0px);
    will-change:transform;
  }
  img:hover {
    transform: rotate(0deg)  scale(1)  skew(0deg) translate(0px);
  }
</style>
<script>
  let animatedImg;
  let start;
  let scale = 0.25;
  function startAnimate(image) {
    animatedImg = image;
    image.style.transition = "";
    start = performance.now();
    requestAnimationFrame(tick);
  }

  function tick() {
    let now = performance.now();
    if (now - start < 2000) {
      let value = 0.25 + ((now - start) / 2000) * (1 - 0.25);
      animatedImg.style.transform = "rotate(0deg) scale(" + value + ") skew(0deg) translate(0px)";
      requestAnimationFrame(tick);
    } else {
      animatedImg.style.transform = "rotate(0deg) scale(1) skew(0deg) translate(0px)";
    }
  }
</script>
<button style="float:right" onclick="startAnimate(img1)">animate1</button>
<img id="img1" src="large1.jpg"/>
<button style="float:right" onclick="startAnimate(img2)">animate2</button>
<img id="img2" style="border: 5px solid orange;" src="large2.jpg"/>