# animation基础

关于动画的属性不少，很多也都是需要了解和清楚的

# 属性

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。

animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。 none特殊关键字，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。
animation-duration属性指定一个动画周期的时长。默认是0s, 表示无动画。单位为秒(s)或者毫秒(ms)，无单位值无效。

animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个 timing-function 对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。下面是一些默认提供的值

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;

animation-delay css属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。
animation-iteration-count CSS 属性定义动画在结束前运行的次数可以是1次无限循环.

如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。
```
/* 值为关键字 */
animation-iteration-count: infinite;

/* 值为数字 */
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* 指定多个值 */
animation-iteration-count: 2, 0, infinite;
```
animation-direction CSS 属性指示动画是否反向播放。

1、normal 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。

2、alternate动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为 ease-out。计数取决于开始时是奇数迭代还是偶数迭代

3、 reverse 反向运行动画，每周期结束动画由尾到头运行。

4、alternate-reverse 反向交替，反向开始交替, 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标。
- none当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。
- forwards目标将保留由执行期间遇到的最后一个关键帧计算值。也就是动画的结果会一直被保持
- backwards 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay (opens new window)期间保留此值。
- both 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。
animation-play-state CSS 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。
- running当前动画正在运行。
- paused当前动画已被停止。
```
@keyframes fontSize {
  0% {
    font-size: 12px;
  }
  100% {
    font-size: 100px;
  }
}
.demo {
  animation: fontSize 5s ease;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.demo:hover {
  animation-play-state: paused;
}
```
可以在hover的时候暂停动画

# 2、:root

自定义css var变量

:root {
  --main-color: red;
}
.test {
  --main-color: blue; /*优先级会比root的高*/
  color: var(--main-color);
}

伪类

# animate.css

从实际工作中来说，使用animate.css 也是不错的选择，并且相对快捷

# 3.1 直接用class-name使用

<h1 class="animate__animated animate__bounce">An animated element</h1>

# 3.2 采用关键帧动画

<style>
  .test-animate {
    animation: bounce;
    animation-duration: 2s; // 不要忘记加上动画时间
  }
</style>
<h2 class="test-animate">Hello world h2</h2>

# 3.3 css自定义属性（css变量）

这是自带的默认值

:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

使用js

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

# 3.4 Usage with Javascript

const demo3 = document.querySelector('#demo3');
demo3.classList.add('animate__animated', 'animate__bounceOutLeft');
demo3.style.setProperty('--animate-duration', '3s');
demo3.addEventListener('animationend', () => {
  console.log('animationend');
  demo3.classList.remove('animate__animated', 'animate__bounceOutLeft');
  setTimeout(() => {
    demo3.classList.add('animate__animated', 'animate__bounceOutLeft');
  });
});

const animateEle = (el, animation, prefix = 'animate__') => {
  return new Promise((resolve, reject) => {
    const animateName = `${prefix}${animation}`;
    if (typeof el === 'string') {
      el = document.querySelector(el);
    }
    if (!el) {
      reject('el is not defined!');
      return;
    }
    el.classList.add(animateName, 'animate__animated');
    function onAnimationEnd(e) {
      e.stopPropagation();
      this.classList.remove(animateName, 'animate__animated');
      resolve('animation ended');
    }
    el.addEventListener('animationend', onAnimationEnd, { once: true });
  });
};
animateEle('.dmmo4', 'flash').then((res) => {
  console.log(res);
});

prefers-reduced-motion

用于检测用户的系统是否被开启了动画减弱功能。

下面的媒体查询可以检测用户时候开启动画弱功能并且提示

/* Show the banner if the user disables animations in the OS level */
@media (print), (prefers-reduced-motion: reduce) {
  .motionless__banner {
    display: block;
  }
}

不能给行内元素加动画

不要给根元素加动画

不要给过大的元素加动画

# 4、

# 5、

← 媒体查询自己用过的一些动画 →