美文网首页
CSS3 动画特性

CSS3 动画特性

作者: zhao_ran | 来源:发表于2020-09-16 14:53 被阅读0次

1.定义动画

用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,应该始终定义 0% 和 100% 选择器。

@keyframes myfirst
{
0%{background: red;}
100%{background: yellow;}
}

当在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

  • 规定动画的名称
  • 规定动画的时长
实例

"myfirst"动画捆绑到div元素,时长:5 秒

div
{
animation: myfirst 5s;
}

注意:必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。

CSS3 动画属性

  • @keyframes: 规定动画。
  • animation: 所有动画属性的简写属性,除了 animation-play-state属性。
简写语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  • animation-name: 规定 @keyframes 动画的名称。
  • animation-duration: 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
  • animation-timing-function: 规定动画的速度曲线。默认是 "ease"。
  • animation-delay: 规定动画何时开始。默认是 0。
  • animation-iteration-count:规定动画被播放的次数。默认是 1。
  • animation-direction: 规定动画是否在下一周期逆向地播放。默认是"normal"
  • animation-play-state: 规定动画是否正在运行或暂停。默认是 "running"
  • animation-fill-mode: 规定对象动画时间之外的状态。

相关文章

  • CSS3过渡动画、圆角、阴影、透明度

    答辩面试题 CSS3的新特性: 1、CSS3圆角、阴影、rgba 2、CSS3 transition动画 3、CS...

  • 前端技能概况

    html 块级元素、行内元素、盒子模型 H5新特性 css css3新特性 flex 布局 动画 js js基础 ...

  • CSS3 动画特性

    1.定义动画 用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0...

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • 前端还在切图?学完这些css,再也不用切图了!

    标题开个玩笑,实际上CSS3有许多亮眼的特性,比如阴影shadow、动画animation、形变transform...

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes ...

  • 08_dayCSS动画

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

  • CSS3 动画

    CSS3 动画CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。 ...

  • CSS3 动画

    动画属性 动画(animation)是CSS3新增的属性,动画属性可以为元素创建动画,CSS3以前在网页上实现动画...

  • css3动画

    css3动画 CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的...

网友评论

      本文标题:CSS3 动画特性

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