찾다
집웹 프론트엔드HTML 튜토리얼CSS3 변형, 전환 및 애니메이션 학습
CSS3 변형, 전환 및 애니메이션 학습
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Sep 20, 2016 am 03:30 AM

CSS3 애니메이션 애니메이션을 배우려면 먼저 변형과 전환에 대한 지식을 이해해야 합니다

이러한 새로운 속성의 대부분은 새 브라우저에서 지원되며 일부는 브라우저 접두사(-webkit-, -moz-, -ms-, -o-)를 추가해야 합니다. 이 문서에서는 콘텐츠를 단순화하기 위해 원래 속성을 직접 사용합니다.

다양한 속성 지원에 따라 실제 사용 중에 해당 브라우저 접두사 지원을 추가해야 합니다

디렉토리:

  1. 변형
  2. 전환
  3. 애니메이션

1. 변신

변환에는 회전, 크기 조정, 이동, 기울이기, 행렬 변형, 원근감 등 여러 작업이 포함됩니다.

1. 초기 페이지 구조

    <span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        html </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            font-family</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> Arial</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .box </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> relative</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid #ddd</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #75e275</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            cursor</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> pointer</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .left,
        .right </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 40px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #4d8aeb</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .left </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .right </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            right</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .box:hover </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            transform</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rotate(-30deg)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>    </span>
<span style="color: #0000ff;">　　<span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

2. 변신작전

　1) 회전 변형: rotate() 각도 값은 다음과 같습니다: 각도 값 deg, 라디안 값 rad, 그래디언트 가드, 회전/원 회전 , 양수 숫자 값은 시계 방향 회전을 나타내고, 그렇지 않으면 시계 반대 방향 

<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotate(-30deg)</span>;
}

원근감 값(관찰자의 위치를 ​​설정하는 데 사용됨)이 요소 자체 또는 요소에 설정된 경우,rotate3d()함수는 3차원 공간에서 회전을 달성할 수 있습니다

rotateX(angele), rotate3d(1,0,0,angle)와 동일하며 3차원 공간에서 X축 회전을 지정합니다

rotateY(angele), rotate3d(0,1,0,angle)와 동일하며 3차원 공간에서 Y축 회전을 지정합니다

rotateZ(angele), rotate3d(0,0,1,angle)와 동일하며 3차원 공간에서 Z축 회전을 지정합니다

<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> perspective(300px) rotateY(120deg)</span>;
}

<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(120deg)</span>;
}

<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotate3d(1, 0, 0, 45deg)</span>;
}

　2) Scale transform: scale([, ]);은 X축과 Y축 요소의 크기를 동시에 조정하는 것을 의미합니다

는 확대/축소 비율을 나타내며 양수, 음수 및 소수일 수 있습니다. 음수는 요소를 먼저 뒤집은 다음 크기를 조정합니다. 두 개의 매개변수가 포함되어 있습니다. 두 번째 매개변수가 누락된 경우 두 번째 매개변수의 값은 첫 번째 매개변수와 같습니다.

scaleX(): 는 X축(가로 방향)에서만 요소의 크기를 조정한다는 의미입니다.

scaleY(): 는 Y축(세로 방향)에서만 요소의 크기를 조정한다는 의미입니다.

scaleZ(): 는 Z축에서만 요소의 크기를 조정한다는 의미입니다. 전제는 요소 자체 또는 요소의 상위 요소에 관점 값이 있다는 것입니다

마찬가지로 scale3d(x, y, z)

가 있습니다. 
<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> scale(1.5)</span>;
}

<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> scale(2, 1)</span>;
}

<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> scaleY(1.5)</span>;
}

　　3）位移 transform: translate([, ]); 表示使元素在X轴和Y轴同时移动

表示位移量。包含两个参数，如果省略了第二个参数则第二个参数为0；如果参数为负，则表示往相反的方向移动。

translateX();表示只在X轴(水平方向)移动元素。

translateY();表示只在Y轴(垂直方向)移动元素。

translateZ();表示只在Z轴移动元素，前提是元素本身或者元素的父元素设定了透视值

同样的，有transform(x, y, z)

<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(100px)</span>;
}

<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(-30px, 50px)</span>;
}

　　4）倾斜 transform: skew( [,]); 包含两个参数值，分别表示X轴和Y轴倾斜的角度，取值类型为角度值deg

如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX();表示只在X轴(水平方向)倾斜

skewY();表示只在Y轴(垂直方向)倾斜

<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> skewX(30deg)</span>;
}

<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> skew(30deg, 30deg)</span>;
}

　　5）矩阵变形 transform: matrix(,,,,,); 

matrix()是矩阵函数，以一个含六值的(a,c,e,b,d,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a c e b d f]变换矩阵，其中c和e用正弦或余弦值表示

这六个参数实际上是一个3*3的矩阵:

<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> matrix(1, 0, 0, 2, 40, 20)</span>;
}

同样的，可用matrix3d定义3D转换，其是一个使用 了16 个值的 4x4 矩阵

 

　　6）透视 transform: perspective(length); 设置查看者的位置，并将可视内容映射到一个视锥上，继而投影到一个 2D 视平面上
透视还可以直接定义成属性 perspective: ，但其是设置所有的子元素有一个共同的透视值

其对于 3D 变换来说至关重要，如果不指定透视，则 Z 空间中的所有点将平铺到同一个 2D 视平面中，并且变换结果中将不存透视深概念。作用于元素的子元素。

如下两种样式定义，结果相同

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
    perspective</span>:<span style="color: #0000ff;"> 300px</span>;
}<span style="color: #800000;">
.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotateY(30deg)</span>;
}<span style="color: #800000;">

.box:hover </span>{<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> perspective(300px) rotateY(30deg)</span>;
}

　　7) transfrom相关的其他属性

除了transform之外，还有一些变换相关的属性，这几个属性很少用到，还没理解到位...

  • transform-origin 变形原点 -- 允许你改变被转换元素的位置
  • transform-style  3D呈现 -- 规定被嵌套元素如何在 3D 空间中显示
  • perspective-origin  透视原点 -- 规定 3D 元素的底部位置
  • backface-visibility  隐藏内容的背面 -- 定义元素在不面对屏幕时是否可见

 

　　7-1）transform-origin

该属性提供2个参数值，第一个用于横坐标，第二个用于纵坐标；如果只提供一个，该值将用于横坐标，纵坐标将默认为50%。

percentage：用百分比指定坐标值。可以为负值。

length：用长度值指定坐标值。可以为负值。

left center right是水平方向取值，而top center bottom是垂直方向的取值。

<span style="color: #800000;">.box:hover </span>{<span style="color: #ff0000;">
    transform-origin</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> rotate(30deg)</span>;
}

　　7-2) transform-style　　

设置内嵌的元素在 3D 空间如何呈现。有两个值：flat：所有子元素在 2D 平面呈现；preserve-3d：保留3D空间

 

　　7-3) perspective-origin

该属性定义在X轴和Y轴的3D元素。这个属性允许你改变3D元素的底部位置。定义时的perspective-origin属性，它是一个元素的子元素，透视图，而不是元素本身。
使用此属性必须和perspective属性一起使用，只影响3D转换的元素

该属性提供2个参数值，第一个用于横坐标，第二个用于纵坐标；如果只提供一个，该值将用于横坐标，纵坐标将默认为50%。

percentage：用百分比指定坐标值。可以为负值。

length：用长度值指定坐标值。可以为负值。

left,center right是水平方向取值，而top center bottom是垂直方向的取值。

　　

　　7-4）backface-visibility

该属性可用于隐藏内容的背面。默认情况下，背面可见，这意味着即使在翻转后，变换的内容仍然可见。但当 backface-visibility 设置为 hidden 时，旋转后内容将隐藏，因为旋转后正面将不再可见。取值有：

visible：默认值，旋转的时候背景可见。

hidden：旋转的时候背景不可见。

 

二、过渡transition

过渡transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值

页面结构如上，根据例子熟悉这些属性

1. 综合transition  可同时设置四个子属性值

<span style="color: #800000;">        .box </span>{<span style="color: #ff0000;">
            position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 200px auto</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
            text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
            border</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> #75e275</span>;<span style="color: #ff0000;">
            cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">

            transition</span>:<span style="color: #0000ff;"> 2s background-color</span>;
        }            
<span style="color: #800000;">        .box:hover </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> #0f0</span>;
        }

2.transition-property 需要过渡的属性 all | none | [ , ]

<span style="color: #800000;">transition-duration: 2s;
transition-property: height,background-color</span>
<span style="color: #800000;">        .box:hover </span>{<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 130px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> #0f0</span>;
        }

3. transition-duration设置动画过渡的时间[执行时间]，默认值0表示不过渡直接看到执行后的结果。单位是秒s，也可以是毫秒ms

4.transition-delay设置动画延迟执行的时间，默认值0表示立即执行，时间可以是正数也可以是负数，负数表示截断规定时间内的动画。单位是秒s，也可以是毫秒ms

<span style="color: #800000;">transition-delay: 1000ms;
transition-duration: 2s;
transition-property: height,background-color</span>

5. transition-timing-function设置动画的过渡效果，默认值ease，取值有

ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔

linear：线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数

ease-in：渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数

ease-out：渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数

ease-in-out：渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数

cubic-bezier：特殊的立方贝塞尔曲线效果

<span style="color: #800000;">transition-timing-function: linear;
transition-delay: 1000ms;
transition-duration: 2s;
transition-property: height,background-color</span>

 

三、动画animation

动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用

<span style="color: #800000;">        @keyframes test </span>{<span style="color: #ff0000;">
            from {
                width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
                height</span>:<span style="color: #0000ff;"> 20px</span>;
            }<span style="color: #800000;">

            50% </span>{<span style="color: #ff0000;">
                height</span>:<span style="color: #0000ff;"> 50px</span>;
            }<span style="color: #800000;">

            to </span>{<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 130px</span>;<span style="color: #ff0000;">
                height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
                background-color</span>:<span style="color: #0000ff;"> #0f0</span>;
            }<span style="color: #800000;">
        }

        .box:hover </span>{<span style="color: #ff0000;">
            animation</span>:<span style="color: #0000ff;"> test 2s</span>;
        }

以上代码设置了一个名称为test的动画，动画执行时间为2s，定义了从开始（from|0%)到结束(to|100%)的动画行为，开始的from可以省略，但结束的不可省略

见效果图

1. 综合animation ，可同时定义多个子属性

2. animation-name 动画名称，需与@keyframes中设置的一致

3. animation-duration 动画执行时间  

4. animation-delay 动画延迟时间  默认值0表示立即执行，正数为动画延迟一定时间，负数为截断一定时间内的动画。单位为秒(s)或毫秒(s)

5. animation-timing-function 动画的过渡类型，取值有：

ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。

linear：线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。

ease-in：渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数。

ease-out：渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数。

ease-in-out：渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数。

step-start：马上转跳到动画结束状态。

step-end：保持动画开始状态，直到动画执行时间结束，马上转跳到动画结束状态。

steps([, [ start | end ] ]?)：第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。

cubic-bezier(, , , )：特殊的立方贝塞尔曲线效果。

<span style="color: #800000;">        @keyframes test </span>{<span style="color: #ff0000;">
            to {
                transform</span>:<span style="color: #0000ff;"> rotate(1turn)</span>;
            }<span style="color: #800000;">
        }

        .box:hover </span>{<span style="color: #ff0000;">
            animation-name</span>:<span style="color: #0000ff;"> test</span>;<span style="color: #ff0000;">
            animation-duration</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
            animation-delay</span>:<span style="color: #0000ff;"> -.5s</span>;<span style="color: #ff0000;">
            animation-iteration-count</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
            animation-timing-function</span>:<span style="color: #0000ff;"> linear</span>;
        }

值得注意的是steps中number参数的意义， 关于steps的参数解析

<span style="color: #800000;">        @keyframes test </span>{<span style="color: #ff0000;">
            50% {
                width</span>:<span style="color: #0000ff;"> 130px</span>;
            }<span style="color: #800000;">

            100% </span>{<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 160px</span>;
            }<span style="color: #800000;">
        }

        .box:hover </span>{<span style="color: #ff0000;">
            animation-name</span>:<span style="color: #0000ff;"> test</span>;<span style="color: #ff0000;">
            animation-duration</span>:<span style="color: #0000ff;"> 1s</span>;<span style="color: #ff0000;">
            animation-timing-function</span>:<span style="color: #0000ff;"> steps(5)</span>;<span style="color: #ff0000;">
            animation-fill-mode</span>:<span style="color: #0000ff;"> forwards</span>;
        }

steps(5)表示将动画行为中的每个间隔分成5段来进行，即0-50%分成5段，50%-100%分成5段 

6. animation-iteration-count: |infinite; 指定对象动画循环播放的次数。 infinite为无限循环

7. animation-direction 指定对象动画运动的方向

normal：正常方向，默认。

reverse：动画反向运行,方向始终与normal相反。（FF14.0.1以下不支持）

alternate：动画会循环正反方向交替运动，奇数次（1、3、5……）会正常运动，偶数次（2、4、6……）会反向运动，即所有相关联的值都会反向。

alternate-reverse：动画从反向开始，再正反方向交替运动，运动方向始终与alternate定义的相反。（FF14.0.1以下不支持）

<span style="color: #800000;">animation-direction: alternate-reverse;</span>

 

8. animation-fill-mode: 检索或设置对象动画时间之外的状态，取值有

none：默认值。不设置对象动画之外的状态

forwards：结束后保持动画结束时的状态，但当animation-direction为0，则动画不执行，持续保持动画开始时的状态

backwards：结束后返回动画开始时的状态

both：结束后可遵循forwards和backwards两个规则

<span style="color: #800000;">        @keyframes test </span>{<span style="color: #ff0000;">
            to {
                width</span>:<span style="color: #0000ff;"> 130px</span>;
            }<span style="color: #800000;">
        }

        .box:hover </span>{<span style="color: #ff0000;">
            animation-name</span>:<span style="color: #0000ff;"> test</span>;<span style="color: #ff0000;">
            animation-duration</span>:<span style="color: #0000ff;"> 1s</span>;<span style="color: #ff0000;">
            animation-timing-function</span>:<span style="color: #0000ff;"> linear</span>;<span style="color: #ff0000;">
            animation-fill-mode</span>:<span style="color: #0000ff;"> backwards</span>;
        }    

<span style="color: #800000;">animation-fill-mode: forwards; /* or both */</span>

 

9. animation-play-state: running | paused 检索或设置对象动画的状态，running为默认值

<span style="color: #800000;">        @keyframes test </span>{<span style="color: #ff0000;">
            to {
                transform-origin</span>:<span style="color: #0000ff;"> center center</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> rotate(1turn)</span>;
            }<span style="color: #800000;">
        }

        .box </span>{<span style="color: #ff0000;">
            animation-name</span>:<span style="color: #0000ff;"> test</span>;<span style="color: #ff0000;">
            animation-duration</span>:<span style="color: #0000ff;"> 1s</span>;<span style="color: #ff0000;">
            animation-timing-function</span>:<span style="color: #0000ff;"> linear</span>;<span style="color: #ff0000;">
            animation-fill-mode</span>:<span style="color: #0000ff;"> forwards</span>;<span style="color: #ff0000;">
            animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;
        }<span style="color: #800000;">

        .box:hover </span>{<span style="color: #ff0000;">
            animation-play-state</span>:<span style="color: #0000ff;"> paused</span>;
        }

 

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
관련 기사
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소?& lt; datalist & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; Progress & Gt의 목적은 무엇입니까? 요소?& lt; Progress & Gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; meter & gt의 목적은 무엇입니까? 요소?& lt; meter & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전ByDDD
R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?
3 몇 주 전ByDDD
더보기

뜨거운 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?
7318
9
자바 튜토리얼
1625
14
Cakephp 튜토리얼
1349
46
라라벨 튜토리얼
1261
25
PHP 튜토리얼
1209
29
더보기