css3动画讲解,关于css3的@keyframes和animation
2024-09-07 22:53:44
通过css3我们可以创建动画,它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的,通过样式来实现的。
@keyframes 规则
@Keyframes我们可以把他理解为“关键帧”,它的规则是:创建由当前样式逐渐改为新样式的动画效果。对于一个"@keyframes"中的样式规则是由多个百分比构成的如“0%”到"100%"之间,我们可以使用“from”和“to”来代表一个动画是从哪开始,到那结束,"from“就相当与0%,”to"就相当于100%。
实例:
@keyframes myfirst{ /*动画名称:myfirst */
from {background: red;}/*0%*/
to {background: yellow;}/**/
}
//或者写成百分百的形式:
@keyframes myfirst{ /*动画名称:myfirst */
% {background:red;}
% {background:yellow;}
% {background:blue;}
% {background:green;}
}
为了兼容浏览器,所以一般要加前缀:@-moz-keyframes兼容/* Firefox */、@-webkit-keyframes兼容/* Safari 和 Chrome */、@-o-keyframes兼容/* Opera */。
@keyframes应该保证定义了 0% 和 100%,这样才能保证浏览器最佳的显示效果。
animation
@Keyframes定义好了后,我们需要通过animation去调用刚才定义好的动画,CSS3的animation类似于transition属性,他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果。anmiation是所有动画属性的简写属性:
属性 | 描述 |
---|---|
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 |
animation-delay | 规定动画何时开始。默认是 0。 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
animation-fill-mode | 规定对象动画时间之外的状态。 |
同样为了兼容,都需要添加对应的前缀。
实例:
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
办公资源网址导航 https://www.wode007.com
与上面的动画相同,但是使用了简写的动画 animation 属性:
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
最新文章
- 【MySQL】 查询某个数据库有多少张数据表
- 剑指Offer 链表中倒数第k个结点
- 【Spring】初始化Spring IoC容器(非Web应用),并获取Bean
- c# asp.net 鼠标改变控件坐标位置,更改控件坐标,注册表保存读取,打印,查找局域网内打印机等等收集
- 写Java程序要体现面向对象
- file_put_contents() 图片保存 函数成功之后返回值
- vijos P1243 生产产品(单调队列+DP)
- hdu 4632区间 dp
- 关于javascript 数组的正态分布排序的一道面试题
- X-UA-Compatible IE 浏览器默认文档模式设置
- 笔记12 注入AspectJ切面
- zookeeper分布式锁
- 安装Redis 编译make gcc: error trying to exec 'cc1': execvp: 没有该文件或目录的错误
- ImageMagick 安装 window10与错误总结
- Java作业 十一(2017-11-13)
- linux下允许和禁止root远程登录的方法
- HTML5之FileReader文件读取接口
- mybatis插入数据并获取主键值
- Go Revel - Filter(过滤器)源码分析
- lua:值得看的博客资源 ...