html中动画的使用及属性_html animation怎么用-CSDN博客

本文链接：https://blog.csdn.net/P3323197861/article/details/131751379

perspective: 设置父元素透视效果

只有父元素设置了透视效果，子元素的z轴的平移效果才能显示

平移时近大远小

transform-style:设置子元素的展示空间

取值：preserve-3d 伪3D

flat 2D设置

旋转时坐标系也随着元素旋转

transform：变形

属性值：

translate:平移，简写

只写一个值代表水平方向，垂直为0

包含：translateY/translateX

水平：正值向右，负值向左

垂直：正值向下，负值向上

rotate:设置旋转单位deg

正值顺时针，负值逆时针

scale:设置缩小放大，数值，代表当前元素的宽高的倍数，

只写一值:代表宽高的缩放倍数相同

二个值：第一个代表宽，第二个代表高

注意：缩小是[0,1）

放大 >1

skew:设置倾斜，单位deg

包含：skewX/skewY

只写一个值：水平方向

transform-origin:设置旋转的定点

transition-property:设置改变的属性

值：

单个改变的属性

all：设置所有改变的属性

如果同时选择多个属性用逗号隔开

transition-duration：设置过渡时间

transition-delay：设置过渡延迟

transition-timing-function：设置过渡速度

可选择：linear 匀速

ease 先慢后快再慢

ease-in 有慢到快

ease-out 由慢结束

ease-in-out 设置慢开始和结束

cubic-bezier 贝塞尔曲线

transition:简写必须要包含变化的属性和过渡时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 124px;
            height: 180px;
            background-color: pink;
            background-image: url(./练习/行走的小雪人/src=http___www.topzhong.com_d_file_sitenews_2016-09-08_f1b1982dd8999c6428c67b990df404ac.jpg&refer=http___www.topzhong.jpeg);
             /* 设置引入关键帧的名字---动画名字 */
            animation-name: run;
            /* 设置动画完成的时间 */
            animation-duration: 4s;
            /* 设置动画速度 */
            animation-timing-function: linear;
            /* 设置动画播放次数 */
            animation-iteration-count: infinite;
            /* 设置动画播放的方向：正反交替 */
            animation-direction: alternate-reverse;
            /* 设置动画是否停止 */
            /* animation-play-state: paused; */
            /* 简写 */
            /* animation: run 2s steps(3) 1s 2; */
            /* 设置动画停止时的状态 */
            animation-fill-mode:  forwards;

        }
        div:hover {
            animation-play-state: paused;
        }
        /* 设置关键帧 */
        @keyframes run {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -372px 0;
            }
        }
    </style>
</head>
<body>
    <!-- 
        1.设置关键帧
        2.通过animation引用关键帧
          animation-name:关键帧名字 必填
          animation-duration：设置动画使用时间 必填
          animation-timing-function:设置动画运行的速度
            取值：
            linear 匀速
            ease 慢-快-慢
            ease-in
            ease-out
            ease-in-out
            贝塞尔曲线
            steps(num) 代表动画完成时通过几步
         animation-iteration-count:设置动画播放次数
           取值： infinite 循环
                  num
          animation-direction：设置播放方向
            取值：
                 alternate  正-反-正
                 alternate-reverse 反-正-反
          animation-play-state:设置动画是否停止
              取值：
                 running 播放
                 paused 停止
           animation-fill-mode：设置动画停止是的状态
            取值 ：backwards：
                  forwards
     -->
     <!-- 设置关键帧 -->
     <div></div>
</body>
</html>