搜索
首页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
css怎么隐藏元素但不占空间css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

css3如何实现鼠标点击图片放大css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3什么是自适应布局css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”,是指可以自动识别屏幕宽度、并做出相应调整的网页布局;这样的网页能够兼容多个不同的终端,而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的,能够为使用不同终端的用户提供很好的用户体验。

css3动画效果有变形吗css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。

css3怎么设置动画旋转速度css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中,可以利用“animation-timing-function”属性设置动画旋转速度,该属性用于指定动画将如何完成一个周期,设置动画的速度曲线,语法为“元素{animation-timing-function:速度属性值;}”。

css3线性渐变可以实现三角形吗css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形;只需创建一个45度的线性渐变,设置渐变色为两种固定颜色,一个是三角形的颜色,另一个为透明色即可,语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

一文了解CSS3中的新特性 ::target-text 选择器一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器,聊聊该选择器的作用和使用方法,希望对大家有所帮助!

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脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

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

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

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

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。