Java Script学习记录

animation动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。


animation 动画实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    @keyframes zhuan {
        from/* 0% 起始点可以换成0%，但%号一定要写 */{            /*写啥都行*/
            transform: rotate(0);                          /*旋转的起始点*/
        }
        10%{                                               /*在1/10的时间内转到180度*/
            transform: rotate(180deg);
        }
        to/* 100% 终点可以换成100% */{
            transform: rotate(360deg);                     /*选择的结束点360度*/
        }
    }
    /*animation动画可以有很多帧，不必要用hover调用*/
        #div1{
            width:200px;
            height: 200px;
            background: red;
            margin:100px auto 0;
            animation: zhuan 10s linear 2s infinite;         /*旋转的标签共转十秒，匀速，延时两秒进行，一直运行下去*/
            /*animation: zhuan 10s ease-in-out 2s 2;           !*旋转的标签共运转10s 淡入淡出，延迟两秒进行，运行两次*!*/
        }
    </style>
</head>
<body>
<div id="div1">

</div>
</body>
</html>
<!--ease-in-out淡入淡出         ease-in淡入                        ease-out淡出-->
<!--linear匀速-->
<!--infinite无限运行-->

transform 动画实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        boby{
            margin:0;
        }
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            /* margin:200px auto; */
            /* transform: translate(100px,200px);                     translate为移动的位置，类似于绝对定位，但不同于绝对定位      */
            /*!*transform: rotate(45deg);*!                          rotate为旋转，deg为多少度*/
            transform: scale(.5);                                    /***scale为缩放比例 */
            /*谷歌浏览器字体默认16px，最小像素为12px*/
        }
    </style>
</head>
<body>
<div id="div1">

</div>
</body>
</html>