css3 transition 和 Animation的区别
css3 transition 和 Animation的区别
王潭不是王雨潭 发表于8个月前
css3 transition 和 Animation的区别
  • 发表于 8个月前
  • 阅读 17
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

简述

css3 新增动画功能,使开发人员不用js或者flash就能实现页面的动态效果。css3提供两种实现动画效果的方式:transition,animation

  • transition:控制元素从一个状态到另一个状态之间的过渡
  • animation:控制元素从包含多种状态的帧到帧之间的变化

transition

  • 每一个需要过渡的属性的两种状态都必须是明确的
  • 可以简单的通过伪类 :hover, :focus, :active, :target触发
  • 包含四种属性 transition-property(过渡的属性), transition-duration(过渡的时间), transition-timing-function(过渡的时间曲线), transition-delay(过渡效果的开始时间)
  • 所有有中间状态的属性才会有过渡效果
  • 可以过渡的属性的值:color、length、visibility、font-size、z-index、number、font weight、percentage等

animation

  • 弥补了transition不能一次控制多个属性的不足
  • 使用@keyframes定义animation,其中包含animation名字,何任意的animation断点。 例如:
//动画定义,一个名叫slide的animation
@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 244px;
    top: 100px;
  }
  100% {
    left: 488px;
    top: 0;
  }
}
//动画触发,在class为ball的元素上触发slide动画,动画持续时间为两秒
.stage:hover .ball {
  animation: slide 2s linear;
}
  • 其中0%和100%可用from和to代替
  • animation 有四个属性,animation-name动画名字、animation-duration动画时长、animation- timing-function(动画的时间曲线)、animation-delay(动画延时)
  • animation-iteration-count 控制动画重复的次数,其值可为一个整数或关键字infinite
  • animation-direction 动画播放的方向可选normal、reverse、alternate、alternate-reverse
  • animation-fill-mode 规定动画时间之外的状态
  • animation-play-state 规定动画是否正在运行或暂停
标签: CSS3 前端动画
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 4
博文 17
码字总数 14628
×
王潭不是王雨潭
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: