xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

Web Animations API

WWAPI

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

https://caniuse.com/#feat=web-animation

https://css-tricks.com/css-animations-vs-web-animations-api/

http://danielcwilson.com/blog/2015/07/animations-part-1/

---

https://www.cnblogs.com/xgqfrms/p/11995088.html

demo

js

const openAnimation = [
  { transform: 'scale(0)' }, 
  { transform: 'scale(1)' }, 
];

document.querySelector('.modal').animate(
    openAnimation, {
      duration: 1000, // 1s
      iterations: 1, // single iteration
      easing: 'ease-in' // easing function
    }
);

css

@keyframes openAnimation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.modal {
  animation: openAnimation 1s 1 ease-in;
}

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---