CSS animation 属性

一、示例

<pre>
语法:
animation: name duration timing-function delay iteration-count direction;<br >
示例代码:
div{
animation: scaleToSmall 3s ease 1s infinite normal;
}<br >
分开写:
div{
animation-name: scaleToSmall; // 指名字,你自己来写
animation-duration:3s; // 你所希望的,动画执行一次耗费的时间
animation-timing-function:ease;// 以哪种方式动画
animation-delay: 1s;// 延迟多少秒后执行
animation-iteration-count: infinite; // 动画执行次数
animation-direction: normal; // 动画执行方向(感觉不常用)
}
</pre>

二、animation属性解析

1. animation-timing-function

规定了动画的速度曲线

w3c 的解释是:


2. animation-iteration-count

可以是n(即次数),可以是infinite ([ˈɪnfənɪt] 无限的;[ˌɪtəˈreʃən]循环)

w3c 的解释是


3. animation-direction

是否应该要轮流反转播放,IE9以及之前版本不支持这个属性

w3c 的解释是


4. @keyframes

执行上面 scaleToSmall 这个动画

w3c 的解释


写两个示例,便于理解
// 1. 匀速向下运动
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
// 2. 按阶段变化
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

3. 一些重要的属性

3.1 step() 阶跃函数

animation-timing-function 中的还有一个 steps() 函数
这是一个阶跃函数
示例 step(num,start)
第一个参数: number类型,必须是整数;
第二个参数:start、end;
<pre>@keyframes circle {
0% {background: red} ;
50%{background: yellow} ;
100% {background: blue} ;
}</pre>
如 step(5,start);
那么,动画会在050%,阶跃5次;50%100%,阶跃5次;
step-start为start,动画会以下一帧的显示效果来填充间隔动画,所以0% 到 50% 直接就显示了黄色yellow

step-end为end,动画会以上一帧的显示效果来填充间隔动画,所以0% 到 50% 直接就显示了红色red

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,327评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,788评论 0 2
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,195评论 0 11
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,883评论 0 4
  • 二饼是只猫,底色白,颈背处有两个橙色大圆斑。它是人民公园常驻流浪猫之一,其他还有幺鸡,一饼,起名的人怕是想凑齐一副...
    猫九tim阅读 629评论 0 0