CSS Keyframe 动画

我们制作复杂好看的动画时，可能要同时做多个动画，而做多个动画自然少不了调试改进，提高用户体验啦。这里有调试动画的方法，请看~

使用负的延迟值

我们如果希望多个动画同时执行并且错开它们的执行时间，可以用 animation-delay 。

 animation-delay 的值为正值时，表示过了指定时间动画才会执行，因此导致用户打开网页时元素要过了指定时间才会移动。

 animation-delay 的值为负值时，动画可以提前执行指定时间的运动，这样用户打开网页所有的动画都会执行。

设置 animation-play-state: paused; 可以让动画停下来方便调试，然后把 animation-delay 延迟设置为不同的负数（即调试时间），就如愿看到动画在不同帧下的状态了。

.debug-animation {
  animation: animation-name 2s linear infinite alternate;
  animation-play-state: paused;
  animation-delay: -1s;
}

 

保证 keyframe 足够准确

初学者经常在 0% 和 100% keyframe中声明相同的属性和值，其实浏览器会在动画开始和结束时自动处理属性值。

举个栗子：

.element {
 animation: animation-name 2s linear infinite;
}

@keyframes animation-name {
  0% {
   transform: translateX(200px);
 }
  50% {
   transform: translateX(350px);
 }
 100% {
   transform: translateX(200px);
 }
}

其实可以改成这样：

.element {
 transform: translateX(200px);
 animation: animation-name 2s linear infinite;
}

@keyframes animation-name {
  50% {
   transform: translateX(350px);
 }
}

这样代码就更简洁啦~

 

本文来自 https://w3ctech.com/topic/1472

 

                                                                                                    

                                                                                                             世界以痛吻我,要我回报以歌。

                                                                                                             加油~我一定可以的！

转载于:https://my.oschina.net/u/3545669/blog/956670