CSS3之动画Animation特效

最新推荐文章于 2024-09-07 13:38:28 发布

ahvpo24422

最新推荐文章于 2024-09-07 13:38:28 发布

阅读量96

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bksyp/p/6044554.html

版权

CSS3的出现让我们通过css样式也能写出炫酷的特效

通过 Animation 这个属性无需插件和jquery也可以轻松的完成简单的动画效果

DEMO：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background: #008aff;
11             position: absolute;
12             -webkit-animation:aname 10s;
13             -o-animation:aname 10s;
14             animation:aname 10s;
15         }
16         @keyframes aname {
17             0%{top:0px;left: 0px;}
18             30%{top:0px;left: 500px;}
19             60%{top:500px;left: 0px;}
20             100%{top:0px;left: 0px;}
21         }
22     </style>
23 </head>
24 <body>
25     <div></div>
26 </body>
27 </html>

这段代码演示的是一个蓝色的正方形div在10秒内移动的过程

首先我们用animation这个属性声明了一个名称 aname 在这个名称的后面10s是指定这个动画的运行时长为10秒

为什么要写三个animation属性这三个animation代表着为css3的不同浏览器进行兼容

前缀 -o- 代表着 opera 内核的浏览器

前缀 -webkit- 代表着拥有webkit内核的浏览器如 Chrome 搜狗浏览器猎豹浏览器

@keyframes aname(动画名) 这个样式是执行动画用的它是写在div外面的

@keyframes 内部的 0%{} 是规定动画在运行时长的百分比状态

也就是0%的时候我规定了它的坐标top和left都是0px

当然还有其他的动画属性

播放的次数 animation-iteration-count

可以写数字也可以写infinite代表无限次

动画的播放曲线 animation-timing-function

默认值 linear 无变化

ease 开始快结束慢

ease-in 动画以低速开始

ease-out 动画以低速结束

ease-in-out 动画以低速开始和结束

cubic-bezier(参数,参数,参数，参数) 写自己的参数 0到1规定速度

如果不是时间很长的动画以上并不会有太大的不同

是否逆行播放 animation-direction 默认值 normal 逆行 alternate

是否暂停动画 animation-play-state 默认值 running 暂停 paused

动画何时开启 animation-delay 数字加s

当然以上的所有属性可以简写成这样

animation: aname 5s linear 2s infinite alternate;

转载于:https://www.cnblogs.com/bksyp/p/6044554.html

ahvpo24422

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3之动画Animation特效

CSS3的出现让我们通过css样式也能写出炫酷的特效通过 Animation 这个属性无需插件和jquery也可以轻松的完成简单的动画效果DEMO： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta...
复制链接

扫一扫