transform animation transition css3动画

transform

定义

　 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

值

transform animation transition css3动画

应用

　　如果transform与transition联合起来用，就能实现绚丽的动画效果，for example~但是如果直接应用在某个元素上，

  transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    div{

        height: 100px;

        width: 100px;

        background-color: red;

        margin-top: 100px;

        margin-left: 200px;

        border-radius: 100%;

    }

    div:hover{

        transform: rotate(50deg);

        transition:1s;

    }

    </style>

</head>

<body>

    <div>我是一个圆</div>

</body>

</html>

animation

定义

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function 规定动画的速度曲线。（linear、ease、ease-in、ease-out、ease-in-out、step-start、

step-end、steps(<number>[, [ start | end ] ])）

animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

   .slowWalk {

    /*规定 @keyframes 动画的名称。*/

    -webkit-animation-name: person-slow;

    /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/

    -webkit-animation-duration: 950ms;

    /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/

    -webkit-animation-iteration-count: infinite;

    /*动画切换的方式是一帧一帧的改变*/

    -webkit-animation-timing-function: steps(1, start);

    -moz-animation-name: person-slow;

    -moz-animation-duration: 950ms;

    -moz-animation-iteration-count: infinite;

    -moz-animation-timing-function: linear;

    }

    /* 普通慢走 */

    @-webkit-keyframes person-slow {

        0% {

            background-position: -0px -291px;

        }

        25% {

            background-position: -602px -0px;

        }

        50% {

            background-position: -302px -291px;

        }

        75% {

            background-position: -151px -291px;

        }

        100% {

            background-position: -0px -291px;

        }

    }

    @-moz-keyframes person-slow {

        0% {

            background-position: -0px -291px;

        }

        25% {

            background-position: -602px -0px;

        }

        50% {

            background-position: -302px -291px;

        }

        75% {

            background-position: -151px -291px;

        }

        100% {

            background-position: -0px -291px;

        }

transition

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。（linear、ease、ease-in、ease-out...）

transition-delay 定义过渡效果何时开始。

animation暂停动画和transition暂停

.pauseWalk {

   -webkit-animation-play-state: paused;

   -moz-animation-play-state: paused;

}

但是如果要停止transition运动的话，强制改变目标过渡值的处理

 var left = $boy.css('left');

// 强制做了一个改变目标left的处理

// 动画是要运行10秒,所以此时动画还是没有结束的

 $boy.css('left',left);

// 增加暂停的样式

 $boy.addClass('pauseWalk');

但是这样是有问题的，下一次的启动必须等上一次动画的时间结束

秒客网

transform animation transition css3动画

相关文章