分析CSS动画Transition与Animation

本篇内容主要讲解“分析CSS动画Transition与Animation”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“分析CSS动画Transition与Animation”吧!

差异比较

animation和transition最大的不同在于transition是当参数改变时触发，而animation则是直接就执行，所有动画效果需要明确的指定关键帧的参数。

浏览器支持

transition写法

.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  transition: width 2s ease-in 2s;
}
.box:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}

animation写法

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  animation: change 5s; 
}


@keyframes change {
  from {
    background-color: #4BC0C8;
  }
  to {
    background-color: #C779D0;
  }
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  animation: change 5s; 
}


@keyframes change {
  0% {
    background-color: #4BC0C8;
  }
  20% {
    background-color: #C779D0;
  }
  60% {
    background-color: #FEAC5E;
  }
  80% {
    background-color: #185a9d;
  }
  100% {
    background-color: #4BC0C8;
  }
}

到此，相信大家对“分析CSS动画Transition与Animation”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！