zoukankan      html  css  js  c++  java
  • css3 动画(animation)-简单入门

    css3之动画(animation)

     css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做一些动画)。具体如何使用呢???

    首先定义一个动画,然后引用动画。

    定义一个动画要使用@keyframes,然后跟上你要定义的动画的名字。关键字"from"表示开始, "to"表示结束,等同于0% 和 100%。最好使用百分比来表示变化发生的时间,这样的话还可以定义从开始到结束中间的其它的时间状态,例如,25%,50%等等,而且使用百分比的话,浏览器的兼容性会更好。

    创建过动画之后,需要绑定到选择器样式上面,这样就可以在HTML中直接引用样式,从而实现动画效果。

    例如:a.定义一个从红色到黄色的动画。

    @keyframes redToYelloAnimate
    {
        from {background: red;}
        to {background: yellow;}
    }

    b.定义一个选择器div的样式,使用animation属性引用动画。动画的名字是redToYelloAnimate,用2s时间,从红色变到黄色。

    div{
         animation: redToYelloAnimate 2s;
     }

    animation是动画所有属性的的简写。具体包含:

    animation-name: 规定@keyframes动画的名称,就是你定义动画时所起的名字。

    animation-duration:完成一次完整的动画需要花费的时间,注意单位是s(秒)或者ms(毫秒),默认是0,所以这个属性必须赋值,不然没动画效果。

    animation-timing-function:规定动画的速度曲线。默认是“ease”,动画是低速开始,然后加快,最后变慢直至结束。

    animation-delay:动画延迟的时间,默认是0。

    animation-iteration-count:动画被播放的次数,默认是1。

    animation-direction:动画是否在下一个周期逆向地播放

    animation-play-state:动画是否正在运行或暂停,默认是“running”

    animation-fill-mode:规定对象动画时间之外的状态。

    有几个属性需要说一下:

    animation-timing-function规定动画的速度曲线,使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线,提供了几个值,你也可以自己定义值。linear:动画一直匀速运动。ease-in 动画低速开始。ease-out动画低速结束。ease-in-out:动画低速开始和结束。cubic-bezier(n,n,n,n):在cubic-bezier 函数中定义自己的值。

    animation-iteration-count动画播放的次数,值是n次或者无限次infinite。

    animation-direction:alternate是反向播放,如果动画设为只播放一次,alternate不会有效果。有时需要slidedown下拉的效果,如果可以反向播放,那么slideup收起的动作就可以使用同一个动画了?!!!一开始欣喜若狂,后来发现,只播放一次,是不会有效果的,所以slidedown和slideup使用同一个动画,不可行。。。真是个大缺憾啊。。。。。。。

    animation-fill-mode:none | forwards | backwards | both

    none不改变默认行为。

    forwards 当动画完成之后,保持最后一个属性值。如上面的例子中,如果想让div在动画结束之后一直保持黄色的话,就需要使用这个值。

    backwards  在animation-delay 所制定的一段时间内,动画开始之前,使用开始属性值。

    both 向前和向后填充模式都被应用。

  • 相关阅读:
    解决:Could not resolve archetype org.apache.maven.archetypes
    Spring MVC配置MyBatis输出SQL
    Spring集成MyBatis 通用Mapper以及 pagehelper分页插件
    关于SpringMVC或Struts2接受参数接收不到的原因
    配置quartz启动时就执行一次
    ajaxFileUpload进行文件上传时,总是进入error
    spring mvc注入配置文件里的属性
    java中将一个文件夹下所有的文件压缩成一个文件
    flume failed to start agent because dependencies were not found in classpath
    ubuntu不能安装pip unable to install pip in unbuntu
  • 原文地址:https://www.cnblogs.com/bg57/p/5375699.html
Copyright © 2011-2022 走看看