我的编程空间,编程开发者的网络收藏夹
学习永远不晚

css3动画属性中Transitions属性与Animations属性怎么用

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

css3动画属性中Transitions属性与Animations属性怎么用

小编给大家分享一下css3动画属性中Transitions属性与Animations属性怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

  1Transitions功能

  (1)浏览器支持:

  到目前为止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上、IE11以上浏览器支持该功能。

  (2)功能

  在CSS3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。

  (3)使用方法

  transition:propertydurationtiming-function

  property:表示对哪个属性进行平滑过渡。

  duration:表示在多久时间内完成属性值得平滑过渡。

  timing-function:表示通过什么方法进行平滑过渡。

  div{

  background-color:#ffff00;

  transition:background-color1slinear;//在1秒内让div元素的背景色从黄色平滑过渡到浅蓝色。

  }

  div{

  background-color:#00ffff;

  }

  (4)另一种使用方法

  transition-property:background-color;

  transition-duration:1;

  transition-timing-function:linear;

  (5)transition-delay属性

  指定变换动画特效延迟多久后开始执行。可以用秒单位或毫秒单位指定属性值。

  transition-delay:1s;

  //或transition:background-color1slinear2s;(在第四个参数中书写延迟时间)

  (6)使用Transitions功能同时平滑过渡多个属性值

  transition:background-color1slinear,color1slinear,width2slinear;

  (7)移动、旋转等动画效果

  img{

  position:absolute;top:70px;left:0;

  transform:rotate(0deg);

  transition:left1slinear,transform1slinear;

  }

  img:hover{

  left:30px;

  transform:rotate(720deg);

  }

  (8)缺点

  只能指定属性的开始值与终点值,然后再这两个属性值之间实现平滑过渡,不能实现更为复杂的动画效果。

  2Animations功能

  (1)浏览器支持:

  到目前为止:Safari4以上、Chrome2以上、Firefox20以上、Opera18以上、IE11以上浏览器支持该功能。

  (2)功能

  与Transitions功能相同,都是通过改变元素的属性值来实现动画效果。

  区别:Animations功能通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

  (3)创建关键帧的集合

  @keyframes关键帧集合名{创建关键帧的代码}

  (4)创建关键帧的代码(类似如下)

  40%{本关键帧中的样式代码}

  (40%表示改帧位于整个动画过程中的40%处,开始帧为0%,结束帧为100%)

  @keyframesmycolor{

  0%{

  background-color:red;

  }

  40%{

  background-color:darkblue;

  }

  70%{

  background-color:yellow;

  }

  100%{

  background-color:red;

  }

  }

  (5)在元素的样式中使用该关键帧的集合

  div{

  animation-name:my-color;//指定关键帧集合的名称

  animation-duration:5s;//指定完成整个动画所花费的时间

  animation-timing-function:linear;//指定实现动画的方法

  }

  (6)其他属性

  animation-delay:用于指定延迟多少秒或毫秒后开始执行动画。

  animation-iteration-count:用于指定动画的执行次数,可指定为infinite(无限次)。

  animation-direction:用于指定动画的执行方向。可指定属性值包括:

  normal:初始值(动画执行完毕后返回初始状态)

  alternate:交替更换动画的执行方向

  reverse:反方向执行动画

  alternate-reverse:从反方向开始交替更改动画的执行方向

  (7)在一行样式代码中定义animation动画时采用如下所示的书写方式

  animation:keyframe的名称动画的执行时长动画的实现方法延迟多少秒后开始执行动画动画的执行次数动画的执行方向;

  (8)实现多个属性值同时改变的动画

  只需只在各关键帧中同时指定这些属性值就可以了。

  3实现动画的方法

  方法 属性值的变化速度

  linear 在动画开始时与结束时以同样速度进行改变

  ease-in 动画开始时速度很慢,然后速度沿曲线值进行加快

  ease-out 动画开始时速度很快,然后速度沿曲线值进行放慢

  ease 动画开始时速度很慢,然后速度沿曲线值进行加快,然后再沿曲线值进行放慢

  ease-in-out 动画开始时速度很慢,然后速度沿曲线值进行加快,然后再沿曲线值进行放慢

  4实现网页的淡入效果

  通过在开始帧与结束帧中改变页面的opacity属性的属性值来实现页面的淡入效果。

  @keyframesfadein{

  0%{

  opacity:0;

  background-color:white;

  }

  100%{

  opacity:1;

  background-color:white;

  }

  body{

  animation-name:fadein;

  animation-duration:5s;

  animation-timing-function:linear;

  animation-iteration-count:1;

  }


css3动画属性中Transitions属性与Animations属性怎么用css3动画属性中Transitions属性与Animations属性怎么用



看完了这篇文章,相信你对“css3动画属性中Transitions属性与Animations属性怎么用”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网行业资讯频道,感谢各位的阅读!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

css3动画属性中Transitions属性与Animations属性怎么用

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

CSS3 动画属性

CSS3 动画虽然transition在一定的时间内可以实现元素的初始状态在指定的时间范围过渡最终状态, 模拟一种过渡动画效果,但它的功能是非常有限的。 因此,CSS3 新增了一个动画属性animation。与过渡属性transition属
2023-01-31

怎么在CSS3中使用Animation动画属性

本篇文章为大家展示了怎么在CSS3中使用Animation动画属性,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。要使用animation动画,先要熟悉一下keyframes,Keyframes的语法
2023-06-08

css3动画的属性有哪些

这篇文章主要讲解了“css3动画的属性有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3动画的属性有哪些”吧!css3动画属性有:“@keyframes”、animation、an
2023-06-14

如何在CSS3中使用Transition动画属性

这篇文章给大家介绍如何在CSS3中使用Transition动画属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。transition属性的值包括以下四个: •transition-property: 指定对H
2023-06-08

编程热搜

目录