CSS3动画属性有哪些

CSS动画属性
CSS动画分为2d动画和3d动画

过渡 transition:属性值(s);特点:需要事件进行触发。

2D变形属性:transform

2d位移:transform:translate(参数1,参数2)

  • 参数1:在X轴移动的距离。 参数2:在Y轴移动的距离
  • 参数的设置:如果是正值的情况下:往右往下 负值:往左往上
.box{
     
            width:500px;
            height:400px;
            margin:100px auto;
            background:orange;
        }
        h2{
     
            width:100px;
            height:100px;
            background:blue;
            /* 过渡属性 */
            transition:1s;
        }
        /* h2进行位置的移动 */
        .box:hover h2{
     
            transform:translateX(200px);
        }
    </style>
</head>
<body>
    <div class="box">
        <h2></h2>
    </div>
</body>

2d缩放:transform:scale(参数1,参数2); (0 - 0.999999 缩小 大于1 放大)

  • 参数1:X轴缩放的比例 。参数2:Y轴缩放的比例
  • 注:如果两个参数相同的情况下 直接写一个。
  .box{
     
            width:500px;
            height:400px;
            background:orange;
            margin:50px auto;
        }
        h2{
     
            width:100px;
            height:100px;
            background:blue;
            transition:1s;
        }
        /* 交互 */
        .box:hover h2{
     
            transform:scaleY(2);
        }

2d旋转: transform:rotate(); 旋转的是一个度数 deg

  • 默认情况下:绕着中心点进行转动
 .box{
     
            width:500px;
            height:400px;
            background:orange;
            margin:40px auto;
        }
        h2{
     
            width:50px;
            height:200px;
            background:blue;
            transition:1s;
        }
        .box:hover h2{
     
            transform:rotateX(60deg);
        }

2d倾斜:transform:skew(); deg

  .box{
     
            width:500px;
            height:400px;
            background:#ccc;
            margin:50px auto;
        }
        h2{
     
            width:200px;
            height:100px;
            background:red;
            /* 过渡属性 */
            transition:1s;
        }
        /* 鼠标滑过 */
        .box:hover h2{
     
            transform:skew(30deg,20deg);
        }

CSS3D

transform-style:preserve-3d 形成一个3D空间:( 让父元素形成3D,让其子元素在3D空间进行变化 )

  • 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴
  • 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴
  • Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向

3D功能函数
变形属性: transform:

  • 3D的位移:
    transform:translate(x,y,z);
    translateX()、 translateY()、 translateZ()

  • 3D的旋转:
    transform:rotate();
    rotateX()、 rotateY()、rotateZ() //默认情况效果类似
    rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]
    - x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
    - y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
    - z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
    - a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。

 .box{
     
            width:500px;
            height:400px;
            background:orange url(./images/1.jpg);
            background-size:100% 100%;
            margin:100px auto;
            /* 形成3D空间 */
            transform-style:preserve-3d;
            transform:rotateY(50deg);
        }
        h2{
     
            width:200px;
            height:200px;
            background:blue url(./images/2.jpg);
            background-size:100% 100%;
            transition:1s;
        }
        .box:hover h2{
     
            transform: rotateX(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <h2></h2>
    </div>
</body>
  • 3D缩放:
    transform:scale3d(x,y,z);
    scaleX()、 scaleY()、scaleZ()


    动画: animation; 特点:不需要事件进行触发。调用关键帧即可
    常用的写法: animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间

     animation-name   关键帧的名称
     animation-duration   动画的持续的时间
     animation-timing-function   动画运用的类型(匀速linear、加速度、减速度、贝塞尔曲线)
     animation-delay  动画的延迟
     animation-iteration-count   动画运动的次数(默认情况下运动1次) infinite(无限循环)
     animation-direction  运动的方向
             属性值:
                 - reverse:反方向运行 ( 让关键帧从后往前执行 )
                 - alternate:动画先正常运行再反方向运行,并持续交替运行
                 - alternate-reverse:动画先反运行再正方向运行,并持续交替运行
     animation-play-state 
             属性值:
                 paused暂停
                 running运动
    

制定关键帧:

    @keyframes 关键帧的名称{
       选择符名{}
        0%{
            //开始状态
        }
        25%{
        }
        50%{
        }
        ......
        100%{
            //结束状态
        }
    }

animation 和@keyframes 自动循环动画代码如下

 .box{
     
            width:800px;
            height:500px;
            background:orange;
            margin:50px auto;
            position:relative;
        }
        h2{
     
            width:100px;
            height:100px;
            background:blue;
            position:absolute;
            left:0;top:0;
            /* 用animation 调用关键帧 */
            animation:h2Move 3s infinite;
        }
        /* 鼠标滑过动画暂定 */
        /* .box:hover h2{
     
            
            animation-play-state:paused;
        } */

        /* 制定关键帧 */
        @keyframes h2Move{
     
            0%{
                left:0;top:0;
            }
            25%{
                left:700px;top:0;
            }
            50%{
                left:700px;top:400px;
            }
            75%{
                left:0;top:400px;
            }
            100%{
                left:0;top:0;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <h2></h2>
    </div>
</body>

你可能感兴趣的:(笔记)