CSS3:过渡效果and帧动画

作者: jiaomeichen | 来源:发表于2017-06-20 13:57 被阅读0次

css3中有三种和动画相关的属性:transform、transition、animation。
transform描述元素静态样式,transition和animation都能实现动态效果。一般前者配合后者使用。

不同点:
1.  触发条件不同。transition通常和hover等事件配合使用,由事件触发。animation则和gif动态图差不多,立即播放。
2. 循环。 animation可以设定循环次数。
3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性, transition中所有样式属性都要一起变化。
4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式,transition负责动画效果,天作之合,比之前只能用js时爽太多。
结论:
1. 如果要灵活定制多个帧以及循环,用animation.
2. 如果要简单的from to 效果,用 transition.
3. 如果要使用js灵活设定动画属性,用transition.
  • transition过渡属性
语法:transition: property duration timing-function delay;
属性:
      1.transition-proprety:设置过渡效果的css属性的名称(none || all || proprety如width)
      2.transition-duration:过渡效果完成的时间
      3.transition-timing-function:速度效果的速度曲线(linear || ease || ease-in || ease-out || ease-in-out || cubic-bezier(n,n,n,n))
      4.transition-delay:过渡效果何时开始
使用方法:
a{
      width:100px;
      transition:all 3s;
}
a:hover{
      width:300px;
}
  • animation帧动画
语法:animation: name duration timing-function delay iteration-count direction;
属性:
      1.animation-name:需要绑定到选择器的keyframe名称
      2.animation-duration:完成动画的时间
      3.animation-timing-function:动画的速度曲线
      4.animation-delay:动画开始之前的延迟
      5.animation-iteration-count:动画播放次数( n || infinite )
      6.animation-direction:是否轮流反向播放( normal || alternate )
使用方法:
div{
        animation:aaa 3s ease 1s 3 alternate;
       -webkit-animation:aaa 3s ease 1s 3 alternate;
}
@keyframes  aaa{
      from {left:0px;}
      to {left:200px;}
}
@-webkit-keyframes  aaa {
      from {left:0px;}
      to {left:200px;}
}

相关文章

  • CSS3:过渡效果and帧动画

    css3中有三种和动画相关的属性:transform、transition、animation。transform...

  • Bootstrap 手册 07 - JS 组件篇

    1. 动画过渡 Transition Bootstrap 对一些组件默认使用过渡动画效果,这种效果是由 CSS3 ...

  • 08_dayCSS动画

    CSS3新增的功能有:过渡和动画,阴影和圆角 css3过渡动画: css3都有哪些新增的东西 : 过度,动画,阴影...

  • CSS3中的过渡动画以及添加动画规则

    之前的网页实现动画效果必须依赖Flash或js,CSS3动画效果属性主要分为三类:过渡、变换、动画。但是这些CSS...

  • css3过渡动画效果

    可以用css3设置动画过渡效果,有transition、transition-property、transitio...

  • css3-animation

    概念:css3提供的通过css制作可控动画的技术。和transform(过渡)的区别:通过关键帧能对动画做更详细的...

  • Redux实现简易Todolist

    React-Transition-Group React动画组件库 实现css3过渡动画效果 用法其实我没怎么看 ...

  • CSS3动画

    css3动画包括过渡,形变,动画 过渡transition: 指定过渡样式:transition-property...

  • css3过渡和动画 一.过渡 transition: 过渡. 从一种样式逐渐改变为另一种的样式效果. transi...

  • 动画设计

    过渡动画 animation动画 多帧动画 文字遮罩

网友评论

    本文标题:CSS3:过渡效果and帧动画

    本文链接:https://www.haomeiwen.com/subject/bmhmqxtx.html