CSS动画学习记录

CSS动画

简单动画效果

<p class="slidein"></p>

对标签p使用动画效果

.slidein {
  animation-duration: 3s; /*一次动画持续时间*/
  animation-name: slidein; /*指定关键帧名字*/
  animation-iteration-count: infinite; /*动画重复次数，默认值为1；可选数字、infinite(无限重复)*/
  animation-direction: alternate; /*运动方向，默认值normal(由头到尾)；还可选alternate(交替反向运行)、reverse(反向运行，由尾到头)、alternate-reverse(反向交替，第一次是反向)*/
}

@keyframes slidein {
  from { /*同0%，动画第一时刻渲染样式*/
    margin-left: 100%;
    width: 300%;
  }

  to { /*同100%，动画最终时刻渲染样式*/
    margin-left: 0%;
    width: 100%;
  }
}

动画事件监听器

使用js代码进行监听所有三种可能的动画事件，setup() 方法设置事件监听器，当文档第一次加载完成时执行该方法。

<p id="watchme"></p>
<ul id="output"></ul>

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false); /*监听动画开始事件传递给listener()；第三个参数为触发类型，默认为false(事件在冒泡阶段)，否则为true(捕捉阶段)*/
e.addEventListener("animationiteration", listener, false); /*监听动画每执行一次*/
e.addEventListener("animationend", listener, false); /*最后一个周期完成后，不会触发animationiteration事件，而触发animationend事件。*/

e.className = "slidein"; /*通过设置元素的class来启动动画，保证不会在代码执行前触发animationstart事件*/

function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l); /*将监听注解输出*/
}

浏览器兼容

如果想兼容 Webkit内核浏览器或者早期版本浏览器，需要在animation前加上前缀：-webkit-，-ms-，-moz-，-o-

• -webkit-：主要兼容的浏览器是：谷歌的Chrome和苹果的Safari浏览器；
• -ms-：主要兼容的浏览器是：微软的Internet Explorer、Edge浏览器；
• -moz-：主要兼容的浏览器是：火狐的Firefox浏览器；
• -o-：主要兼容的浏览器是：欧朋的Opera浏览器。

以-webkit为例

.slidein {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-webkit-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }

  to {
   margin-left:0%;
   width:100%;
 }
}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }

  to {
   margin-left:0%;
   width:100%;
 }
}```