本篇文章给大家带来的内容是关于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中文网其他相关文章!

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

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

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

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

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

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

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

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


热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Dreamweaver CS6
视觉化网页开发工具

WebStorm Mac版
好用的JavaScript开发工具

禅工作室 13.0.1
功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

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