CSS3过渡动画关键帧动画
一、过渡动画
过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。
所谓的状态就是指大小、位置、颜色、变形(transform)等等这些属性。
Note:不是所有属性都能过渡,只有属性具有一个中间点值才具备过渡效果。
点击查看完整列表。
css过渡只能定义首和尾两个状态,所以是最简单的一种动画。
注释:Internet Explorer 9 以及更早版本的IE浏览器不支持 transition 属性。
如何在项目中正确、熟练地应用transition动画?
第一步:在目标元素的样式声明中定义元素的初始状态,然后在同一声明中用 transition 属性配置动画的各种参数。
可定义的参数有:
- transition-property:规定对哪个属性进行过渡。
- transition-duration:定义过渡的时间,默认是0。
- transition-timing-function:定义过渡动画的缓动效果,如淡入、淡出等。
- linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
- ease(默认值)规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
- ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
- ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
- ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
- transition-delay:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0。
注意:要在同一代码块中定义元素初始状态(样式),添加transition属性。
如果想要同时过渡多个属性,可以用逗号隔开。
第二步:改变元素的状态。
为目标元素添加伪类或添加声明了最终状态的类。
使用 transtion 属性只是规定了要如何去过渡,要想让动画发生,还得要有元素状态的改变。如何改变元素状态呢,当然就是在css中给这个元素定义一个类(:hover等伪类也可以),这个类描述的是过渡动画结束时元素的状态。
除了使用hover等系统提供的伪类外,我们也可以随意的定义自己的类,然后想要过渡时就通过js把类加到元素上面。
注意:单纯的代码不会触发任何过渡操作,需要通过用户的行为(如点击,悬浮等)触发。可触发的方式有::hover :focus :checked 媒体查询触发 JavaScript触发。
示例1:
示例2:
当鼠标悬停在img元素上时,改变img元素的尺寸。改变的整个过程是平滑过渡的,不是快速、突兀的。
img {height:15px; /*初始值*/ width:15px; transition:1s1s height; /*过渡*/ } img:hover { height:450px; /*最终值*/ width:450px; }
过渡动画的局限性
transition的优点在于简单易用,但是它有几个很大的局限。
(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
二、关键帧动画
不同于过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态,或者用关键帧的话来说,过渡动画只能定义第一帧和最后一帧这两个关键帧,而关键帧动画则可以定义任意多的关键帧,因而能实现更复杂的动画效果。
注释:Internet Explorer 9 以及更早的IE版本不支持 animation 属性。
如何在项目中正确、熟练地应用animation动画?
animation就相当于用@keyframes预先定义好元素在整个过渡过程中将要经历的各个状态,然后再通过animation属性将这些状态一次性赋给该元素。
第一步:通过类似Flash动画中的帧来声明一个动画。
关键帧动画的定义方式也比较特殊,它使用了一个关键字 @keyframes 来定义动画。具体格式为:
@keyframes 动画名称 { 时间点 {元素状态} 时间点 {元素状态} …}
一般来说,0%和100%这两个关键帧是必须要定义的。0%可以由from代替,100%可以由to代替。
第二步:在目标元素的样式声明中使用animation属性调用关键帧声明的动画。
现在我们知道了怎么去定义一个关键帧动画了,那怎么去实现这个动画呢?其实很简单,只要把这个动画绑定到某个要进行动画的元素上就行了。把动画绑定到元素上,我们可以使用animation属性。
可配置的参数有:
- animation-name:none为默认值,将没有任何动画效果,其可以用来覆盖任何动画。
- animation-duration:默认值为0s,意味着动画周期为0s,也就是没有任何动画效果。
- animation-timing-function:与transition-timing-function一样。
- animation-delay:在开始执行动画时需要等待的时间。
- animation-iteration-count:定义动画的播放次数,默认为1,如果为infinite,则无限次循环播放。
- animation-direction:默认为nomal,每次循环都是向前播放,(0-100)。另一个值为alternate,动画播放为偶数次则向前播放,如果为基数词就反方向播放。
- animation-state:默认为running,播放,paused,暂停。
- animation-fill-mode:定义动画开始之前和结束之后发生的操作。
- none(默认值),动画结束时回到动画没开始时的状态;
- forwards,动画结束后继续应用最后关键帧的位置,即保存在结束状态;
- backwards,让动画回到第一帧的状态;
- both:轮流应用forwards和backwards规则;
注意:只要把定义好的动画绑定到元素上,就能实现关键帧动画了,而不是像第一种过渡动画那样,需要一个状态的改变才能触发动画。
animation属性到目前为止得到了大多数浏览器的支持,但是,需要添加浏览器前缀!另外,@keyframes必须要加webkit前缀。
示例:
div:hover {-webkit-animation:1s changeColor; /*调用动画*/ animation:1s changeColor; } @-webkit-keyframes changeColor { /*声明动画*/ 0% {background:#c00;} 50%{background:orange;} 100%{background:yellowgreen;} } @keyframes changeColor { 0%{background:#c00;} 50%{background:orange;} 100%{background:yellowgreen;} }
过渡动画与关键帧动画的区别
animation属性类似于transition,他们都是随着时间变化而改变元素的属性值,其主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。
三、animate.css动画库
animate.css是一个css3动画库,可以到github上去下载,里面预设了很多种常用的动画,使用也很简单,因为它是把不同的动画绑定到了不同的类里,所以我们想要使用哪种动画的时候,只需要简单的把那个相应的类添加到元素上就行了。
该库大致包含如下这些动画效果:
- bounce(跳动)、flash(闪光)、pulse(脉冲)、rubber band(橡皮筋)、shake(抖动)、swing(摇摆)、wobble(摇摆不定)
- fade(淡入或淡出)
- flip(翻转)
- rotate(旋转)
- slide(滑动)
- zoom(放大或缩小)
如何在项目中正确、熟练地应用animate动画库?
(1):在head中引入animate.min.css文件。
注:由于animate.min.css默认包含所有的动画效果。因此当我们仅使用其中的几个动画效果时,我们最好使用gulp构建仅包含我们需求的animate.min.css,这样可以避免我们引入的animate.min.css文件体积过大。
如何使用gulp构建符合我们需求的animate.min.css?
第一步:将整个animate.css项目下载下来,作为生产环境的依赖:
npm install animate.css --save
第二步:进入animate.css项目根目录下:
$cd path/to/animate.css/
第三步:加载dev依赖:
npm install
第四步:根据实际需要修改animate-config.json文件:
例如:我们只需要这两个动画效果:bounceIn和bounceOut。
{"bouncing_entrances": ["bounceIn"],"bouncing_exits": ["bounceOut"]
}
最后一步:进入animate.css项目下,运行gulp任务:gulp default,生成新的animate.min.css覆盖默认的animate.min.css。
(2)你想要哪个元素进行动画,就给那个元素添加上animated类 以及特定的动画类名,animated是每个要进行动画的元素都必须要添加的类。
你也可以在动画完成后,把动画类移除,以便可以再次进行同一个动画。
至于动画的配置参数,比如动画持续时间,动画的执行次数等等,你可以在你的的元素上自行定义,覆盖掉animate.min.css里面所定义的就行了。注意添加浏览器前缀。
转载于:https://www.cnblogs.com/goodbeypeterpan/p/9636468.html
CSS3过渡动画关键帧动画相关推荐
- css3新增动画属性(过度动画 变形动画 关键帧动画)
目录 过度动画transition 多属性值过渡 2d变形transform 平移 应用:实现居中(不要求知道盒子的宽高) 缩放 旋转 倾斜 修改变形中心的属性 变形属性的复合写法 3D变形动画 3d ...
- css3利用animation关键帧动画实现轮播图
1.原理说明: 见视频:168-关键帧动画-轮播案例_哔哩哔哩_bilibili (前3:44分钟) 文字说明:一个盒子里放里一个长条的盒子放很多小盒子,小盒子里面放的是图片,然后让这个小盒子浮动起来 ...
- css3变换、过渡与动画_带有CSS3过渡和变换的画布菜单
css3变换.过渡与动画 Now as an easy to use jQuery Plugin 现在作为易于使用的jQuery插件 介绍 ( Introduction ) Off Canvas Me ...
- bada 2D游戏编程之十——关键帧动画原理
bada 2D游戏编程之十--关键帧动画原理 前面提到的逐帧动画有一个关键的缺点就是需要为动画中的每一帧都提供一张单独的图片,由于每一帧的图片都需要单独提供,制作起来比较麻烦,图片量也比较大.用关键帧 ...
- [计算机图形学]动画与模拟:关键帧动画、质点弹簧系统、运动学与绑定(前瞻预习/复习回顾)
一.动画的简要概念 动画和语言一样,一开始都是作为传达信息的工具.什么是动画呢?简单的理解就是让画面变成"活的",也就是让它们能够动起来,其次需要一定的美观.在图形学上,我们可以把 ...
- css3圆角360度转动画,target,框架集,css3过渡动画,css3圆角-阴影-透明度,运动曲线,图片文字遮罩,变形...
target 模拟后台服务器 框架集 frameset和body不合,所以如果用frameset就不能有body标签 利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显 示不 ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- css3中的变形(transform)、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- css3中transition过渡和animation动画的区别
css3中transition过渡和animation动画的区别 animation 多两个参数,循环和动画的方式 transition不能自行触发,通过hover等动作或结合JS进行触发.anmia ...
最新文章
- Matlab使用笔记
- 华为软件测试工程师与普通软件工程师的区别
- android 圆角图片的实现
- sql 执行顺序_10个简单步骤,完全理解SQL
- boost::gregorian模块实现打印假期的测试程序
- python中如何统计元组中元素的个数_Python:count直到列表中的元素是一个元组
- http地址后面加上问号?防止IE缓存
- 变量的三重属性_TypeScript基础入门 - 变量声明(三)
- 导师评价网北工大计算机段老师,北京工业大学怎么样好不好(排名-师资-专业-评价)...
- C# 笔记3 - 重载一系列像python那样的print()方法
- mysql update 几万 非常慢_MySQL慢日志这样分析才够味
- 卡特兰数,高精度卡特兰数
- python中read,readline,和readlines的区别 并逐行输出
- caffe编译好后,需要配置.bashrc
- 英特尔王庆连续四年担任OpenStack基金会个人独立董事
- visio profession 2013破解
- CSDN免费获得积分和直接获取下载码的方法,亲测有效
- 《细说PHP》分页源代码
- MATLAB局部放大
- kd树 python实现_python K近邻算法的kd树实现
热门文章
- c++interesting转换为uint_巴西插头标准,旅行转换插头是怎样的?
- python 代码行数统计工具_使用Python设计一个代码统计工具
- linux上数据库导入与导出(mysql)
- 2Y叔的clusterProfiler-book阅读Chapter 2 Functional Enrichment Analysis Methods
- textview 加粗_Android 改变 TextView 内局部样式
- mysql教程日志_MySQL日志
- mysql创建关系模式命令_Mysql数据库介绍及mysql显示命令
- python调用sql数据库_Python3操作SQL Server数据库(实例讲解)
- 决策树(十二)--XGBoost
- python 数组中取出最小值_Python 数组中的冒号使用