搜索
首页web前端css教程css3动画属性之Transitions属性与Animations属性的功能实现

本篇文章给大家带来的内容是关于css3动画属性之Transitions属性与Animations属性的功能实现 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1 Transitions功能

(1)浏览器支持:

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

(2)功能

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

(3)使用方法

transition:property duration timing-function

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

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

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

div{
background-color:#ffff00;
transition:background-color 1s linear;//在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-color 1s linear 2s;(在第四个参数中书写延迟时间)

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

transition:background-color 1s linear,color 1s linear,width 1s linear;

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

img{
position:absolute;top:70px;left:0;
transform:rotate(0deg);
transition:left 1s linear,transform 1s linear;
}
 img:hover{
left:30px;
transform:rotate(720deg);
}

(8)缺点

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

2 Animations功能

(1)浏览器支持:

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

(2)功能

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

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

(3)创建关键帧的集合

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

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

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

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

@keyframes mycolor{
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属性的属性值来实现页面的淡入效果。

@keyframes fadein{
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动画属性animation(动画)_html/css_WEB-ITnose

CSS3展现精彩的动画效果 css3的动画属性_html/css_WEB-ITnose

以上是css3动画属性之Transitions属性与Animations属性的功能实现的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
锚定位只是不关心来源订单锚定位只是不关心来源订单Apr 29, 2025 am 09:37 AM

锚定定位避开HTML源顺序的事实是如此css-y,因为它在内容和演示文稿之间的另一个关注点分离。

保证金是什么:40px 100px 120px 80px表示?保证金是什么:40px 100px 120px 80px表示?Apr 28, 2025 pm 05:31 PM

文章讨论了CSS保证金属性,特别是“保证金:40px 100px 120px 80px”,其应用程序以及对网页布局的影响。

什么是不同的CSS边框特性?什么是不同的CSS边框特性?Apr 28, 2025 pm 05:30 PM

本文讨论了CSS边境属性,重点是自定义,最佳实践和响应能力。主要论点:边境 - 拉迪乌斯(Border-Radius)对响应式设计最有效。

什么是CSS背景,列出属性?什么是CSS背景,列出属性?Apr 28, 2025 pm 05:29 PM

本文讨论了CSS背景属性,它们在增强网站设计方面的用途以及避免的常见错误。重点是使用背景大小的响应式设计。

什么是CSS HSL颜色?什么是CSS HSL颜色?Apr 28, 2025 pm 05:28 PM

文章讨论了CSS HSL颜色,其在网络设计中的使用以及比RGB的优势。主要重点是通过直观的颜色操纵来增强设计和可访问性。

我们如何在CSS中添加评论?我们如何在CSS中添加评论?Apr 28, 2025 pm 05:27 PM

本文讨论了CSS中评论的使用,详细介绍了单线和多行评论语法。它认为注释可以增强代码可读性,可维护性和协作,但如果无法正确管理,可能会影响网站性能。

什么是CSS选择器?什么是CSS选择器?Apr 28, 2025 pm 05:26 PM

本文讨论了CSS选择器,其类型和用于造型HTML元素的用法。它比较ID和类选择器,并与复杂的选择器解决性能问题。

哪种类型的CSS持有最高优先级?哪种类型的CSS持有最高优先级?Apr 28, 2025 pm 05:25 PM

本文讨论了CSS优先级,重点是具有最高特异性的内联风格。它解释了特异性级别,覆盖方法和用于管理CSS冲突的工具。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版