c3 animation

c3 animation

切记将动画盒子设置定位

定义和用法

	animation 属性是一个简写属性，用于设置六个动画属性：
		动画事件名	animation-name
		动画时间     animation-duration
		动画循环次数  animation-iteration-count
		规定动画的速度曲线  animation-timing-function
		规定是否应该轮流反向播放动画   animation-direction
		动画延迟时间  animation-delay

animation-timing-function  拥有六个值
                linear          动画匀速执行
                ease            动画 慢->快->慢
                ease-in         动画 低->快
                ease-out        动画 快->慢
                ease-in-out     动画 低->低
                cublic(n,n,n)   自定义速度  值在0--1之间

animation的使用

语法

animation: name(动画名) duration(动画需要的时间) timing-function(动画节奏) delay(动画延迟的时间) iteration-count(动画执行几次) direction(动画是否反复播放)	

css使用

@keyframes move {
            from {
                left: 0px;
                top: 0px
            }

            to {
                left: 130px;
                top: 130px;
            }
        }

from{
	动画开始的样式
}
to{
	动画结束的样式
}

JavaScript使用

object.style.animation="mymove 5s infinite"

样式代码

        div {
            width: 100px;
            height: 100px;
            background: yellow;
            /* animation */
            /* 定义和用法 */
            /* animation 属性是一个简写属性，用于设置六个动画属性： */
            /* 动画元素设置定位 */
            position: relative;
            /* 动画事件名 */
            animation-name: move;
            /* 动画时间 */
            animation-duration: 3s;
            /* 动画循环次数 */
            animation-iteration-count: 3;
            /* 规定动画的速度曲线。 */
            /* 
                animation-timing-function拥有六个值
                    linear          动画匀速执行
                    ease            动画 慢->快->慢
                    ease-in         动画 低->快
                    ease-out        动画 快->慢
                    ease-in-out     动画 低->低
                    cublic(n,n,n)   自定义速度  值在0--1之间
             */
             animation-timing-function:cublic(0.2,1,0.2);
            /* 规定是否应该轮流反向播放动画。 */
            /* animation-direction */
            /* 动画延迟时间 */
            animation-delay: 2s;
        }

        /* 语法
            animation: name(动画名) duration(动画需要的时间) timing-function(动画节奏) delay(动画延迟的时间) iteration-count(动画执行几次) direction(动画是否反复播放);
         */
        /* js语法 */
        /* object.style.animation="mymove 5s infinite" */
        /* 
        @keyframes 调用动画名
            from  开始时的样式
            to    结束时的样式
         */
        @keyframes move {
            from {
                left: 0px;
                top: 0px
            }

            to {
                left: 130px;
                top: 130px;
            }
        }