您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势,全网首家
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

免费咨询热线
0371-56789-390

CSS3动画之animation的基本用法
发表:紫石头原创模板堂    发表时间:2019-06-18 09:28:18    阅读:111

    CSS3新增了一个令人心动的属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和浏览器性能上有着明显的优点。
    CSS3中真正的动画属性是animation,而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上,CSS3所支持的动画效果只是填充动画,也就是说先设定整个动画生命周期中的几个关键状态(key  frame,关键帧),然后动画将自行计算并模拟关键帧之间的过渡。那么在设置animation的属性之前就必须先设定好关键帧了。
    animation基本用法是:
    animation: name keeping-time animate-function delay times iteration final;
    第一个参数:name (animation-name):
    动画的名字,即设定动画过程的名字,CSS3采用“关键帧 keyframes”来定义动画,方式形如:
    @-webkit-keyframes name{
    0%{
    opacity: 0;
    }
    100%{
    opacity: 1;
    }
    }
    前缀-webkit-表示webkit内核浏览器(Chrome、Safari和变心的opera),以上代码定义了一个动画,名叫name,效果是使透明度从0变化到1,0%——100%为整个过程,当然也可以定义多段如:0%——20——50%——100%。
    第二个参数:keeping-time (animation-duration):
    整个动画的持续时间,必须带上时间单位,s或者ms均可;默认值为 0,意味着没有动画效果。
    第三个参数:animate-function (animation-timing-function):
    设置动画如何完成一个周期,运动方式(动画方式)的贝赛尔曲线,可取值为:ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。
    值:linear  匀速
    ease   先慢后快,结束前变慢     默认
    ease-in    低速开始
    ease-out  低速结束
    ease-in-out   低速开始和结束
    cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
    第四个参数:delay (animation-delay):
    动画在启动前的延迟间隔,动画延迟执行的时间,单位也是s或者ms,值得注意的是,即使延迟时间为0,也必须加上时间单位,如果写成直接写成0,在Chrome和Safari(webkit)下是没问题的,但是在FF(gecko)下无效。
    第五个参数:times (animation-iteration-count):
    动画循环执行的次数,无单位,默认值1。infinite为无限循环。
    第六个参数:iteration (animation-direction):
    如果动画循环,循环的方式是:alternate(在奇数次正向播放,在偶数次反向播放)、alternate-reverse(在奇数次反向播放,在偶数次正向播放)、normal(正常播放)、reverse(反向播放)、
    第七个参数:final (animation-fill-mode):
    当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要处于什么状态
    值:none   默认,播放完动画后,画面停在起始位置
    forwards     播放完动画,停在animation定义的最后一帧(保持最后一个属性值)
    backwards   如果设置了animation-delay,在开始到delay这段时间,画面停在第一帧。如果没有设置delay,画面是元素设置的初始值
    both   设置动画状态为动画结束或开始的状态(例如设置奇数播放为forwards状态,偶数播放为backwards状态)
    每个参数也可以单独写,最后用的时候记得加浏览器前缀:
    .classname{
    -webkit-animation:name 6s linear 0ms infinite normal forwards;
    -moz-animation:name 6s linear 0ms infinite normal forwards;
    -o-animation:name 6s linear 0ms infinite normal forwards;
    animation:name 6s linear 0ms infinite normal forwards;
    }
    将不带前缀的写在最后面好处是等到animation被所有浏览器认可,可以摈弃前缀的时候可以覆盖前面的样式。


模板推荐
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2020 永易搜旗下紫石头原创模板堂 All Rights Reserved 豫ICP备14011598号-7 营业执照