css3 动画结合jquery 学习备忘

最新推荐文章于 2020-06-10 22:08:14 发布

prpjava2011

最新推荐文章于 2020-06-10 22:08:14 发布

阅读量536

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/prpjava2011/article/details/40858495

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css3动画兼容性（@keyframes）：
        IE10+，Firefox，Opera    支持@keyframes 规则
        Chrome Safari           需要前缀 -webkit-@keyframes

        注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

         创建动画
         1 @keytframes 动画选择器（定义动画的过程
                        1 from{}tp{} 表示:0%{}100%{}
                        2 指定变化过程 0%{}20%{}40%{}80%{}100%{}
                    ）

         2 动画选择器（
                必选项：
                 规定动画的名称
                 规定动画的时长默认时长是0 不设置的话不会有动画

         ）

        css3 所有动画属性
        @keyframes    规定动画。    3
        animation    所有动画属性的简写属性，除了 animation-play-state 属性。    3
        animation-name    规定 @keyframes 动画的名称。    3
        animation-duration    规定动画完成一个周期所花费的秒或毫秒。默认是 0。    3
        animation-timing-function    规定动画的速度曲线。默认是 "ease"。    3
        属性说明:
        animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

        linear    动画从头到尾的速度是相同的。
        ease    默认。动画以低速开始，然后加快，在结束前变慢。（缓冲运动）
        ease-in    动画以低速开始。
        ease-out    动画以低速结束。
        ease-in-out    动画以低速开始和结束。
        cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

        animation-delay    规定动画何时开始。默认是 0。    3
        animation-iteration-count    规定动画被播放的次数。默认是 1。    3
        animation-direction    规定动画是否在下一周期逆向地播放。默认是 "normal"。    3
        animation-play-state    规定动画是否正在运行或暂停。默认是 "running"。    3
        animation-fill-mode    规定对象动画时间之外的状态。

        ==================================
        根据以上的介绍css3依然无法完成令人满意的效果，css3的动画还包括一些高级特性
        变形   IE 10+    Firefox 3.5+    Opera 11.50+    Safari 10+    Chrome 2.0+
        1 transform(基本的变形需要指定过渡方式)
           transform: none | <transform-function>[<transform-function>]*
           取值：
           none:表示不进行变换；
           <transform-function>:表示一个或多个变换函数，以空格分开，因此可以同时对一个元素进行transform的多种属性操作。

            1.rotate(<angle>):旋转元素
            2.scale(<number>[, <number>]):缩放元素
            3.translate(<translation-value>[, <translation-value>]):移动元素
            4.skew(<angle> [,<angle>]):倾斜元素
            5.matrix(<number>,<number>,<number>,<number>,<number>,<number>):矩阵变形
            6.perspective(length):透视

      2 过渡 transition
        Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
        Safari 支持替代的 -webkit-transition 属性。
        transition: property duration timing-function delay;
         -webkit-transition:property duration timing-function delay;
        property:规定设置过渡效果的 CSS 属性的名称。
        duration:规定完成过渡效果需要多少秒或毫秒
        timing-function:规定速度效果的速度曲线。
        delay:定义过渡效果何时开始。

    上面说了那么多，那么问题来了。transition 和 animation 之间是什么关系?
    感觉两个重合了，
    transition属性是一个简单的动画属性，非常简单非常容易用。
    可以说它是animation的简化版本，是给普通做简单网页特效用的。animation可以做更加精细的动画：

   给元素加上动画样式他会执行动画，但不会监听样式属性，也就是某一个样式属性改变时不会触发动画

   给元素加上transtion样式时   会监听指定的样式属性，当属性改变的时候会触发过度效果

transform只是静态的变化，不涉及动画。只有添加了变形的过渡属性监听，才会有动画

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html;charset=utf-8">
<title>css3动画效果</title>
<script src="../config/js/jquery.js"></script>
<style>

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

    @-moz-keyframes myfirst /* Firefox */
    {
        from {background: red;}
        to {background: yellow;}
    }

    @-webkit-keyframes myfirst /* Safari 和 Chrome */
    {
        from {background: red;}
        to {background: yellow;}
    }

    @-o-keyframes myfirst /* Opera */
    {
        from {background: red;}
        to {background: yellow;}
    }

    /*基本的动画*/
    #div1
    {

        /*定义动画的名称*/
        animation-name: myfirst;
        -webkit-animation-name: myfirst;
        -moz-animation-name: myfirst;
        -ms-animation-name: myfirst;
        /*动画时长*/
        animation-duration: 5s;
        -webkit-animation-duration: 5s;
        -moz-animation-duration: 5s;
        -ms-animation-duration: 5ms;
        /*速度曲线函数：速度曲线用于使变化更为平滑*/
        animation-timing-function:linear;
        -webkit-animation-timing-function:linear;

        /*动画延时*/
        animation-delay:2s;
        -webkit-animation-delay:2s; /* Safari 和 Chrome */

        /*动画的循环次数*/
        animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite; /* Safari 和 Chrome */

    }
    .demo_rotate{
        -webkit-transition:1s ease all;
        -moz-transition:1s ease all;
        padding:10px;
        margin:90px auto;
        background: #f00;
    }
    .demo_rotate:hover{
        -webkit-transform:rotate(360deg) scale(1.2,1.2);
        -moz-transform:rotate(360deg) scale(1.2,1.2);
        background:#ff9900;
    }
    /*
        测试移动动画
    */
        /*
         transition
         */
    .a-auto-3{
        transition:all 0.8s ease-in-out;
        -moz-transition:all 0.8s ease-in-out;
        -ms-transition:all 0.8s ease-in-out;
        -webkit-transition:all 0.8s ease-in-out;
    }
    .a-element-13{left:1998px; top:0px; opacity:0; z-index:1;}
    .a-element-13-a{left:350px; top:0px; opacity:1; }
    .a-element{ position:absolute; display:block;}



</style>
</head>
 <body>


     <div id="div1" style="width: 100px;height: 100px;"></div>
     <!--
     <div class="demo_rotate" style="width: 100px;height: 100px;"></div>
     -->
    <img src="img-15.jpg" class="a-element a-element-13 a-auto-3 " >
<script>
    $(function(){
        $(".a-element").addClass("a-element-13-a");

    })

</script>
 </body>

</html>