Quelles sont les trois principales propriétés d'animation de CSS3-Questions et réponses frontales-php.cn

Quelles sont les trois principales propriétés d'animation de CSS3

青灯夜游

Libérer： 2021-12-16 14:56:36

original

3250 Les gens l'ont consulté

Les trois principaux attributs d'animation de CSS3 sont : 1. L'attribut Transition, utilisé pour définir l'effet de transition des éléments ; 2. L'attribut Transform, utilisé pour appliquer une transformation 2D ou 3D (rotation, mise à l'échelle, mouvement ou inclinaison) aux éléments ; . L'attribut d'animation doit être utilisé avec "@keyframes" pour créer des animations.

Quelles sont les trois principales propriétés d'animation de CSS3

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Les propriétés d'animation CSS3 sont divisées en : transformation, transition, animation

1.transition (transition)

a:transition-property：检索或设置对象中的参与过渡的属性
b.transition-duration：检索或设置对象过渡的持续时间
c.transition-delay：检索或设置对象延迟过渡的时间
d.transition-timing-function：检索或设置对象中过渡的动画类型

简写：
		transition: 属性值1  属性值2  属性值3  属性值4
属性值1： 需要参与过渡属性   all  ( 能支持过渡属性的都会过渡变换  默认值)
属性值2： 过渡的时间   s秒   ms  毫秒
属性值3： 延迟的时间   s秒   ms  毫秒
属性值4： 动画的类型（匀速、匀加速、匀减速........）

Copier après la connexion

Par exemple : transition:3s 2s linear;

2.transform

2D

a.位移：transform:translate(参数1，参数2)
			参数1：在X轴移动的距离
            参数2：在Y轴移动的距离
            ps:参数如果是正值的情况下：往右往下   负值：往左往上
		单独设置X/Y的位移：
			transform:translateX(参数);
            transform:translateY(参数);
b.缩放：transform:scale(参数1，参数2);
			参数1：X轴缩放的比例 
            参数2：Y轴缩放的比例
            ps:参数小于1,缩小；参数大于1，放大。如果两参数相同，写一个就行
        单独设置X  Y
			transform:scaleX();
			transform:scaleY();
c.旋转：transform:rotate();
			默认情况下围绕中心点转动，转动的是度数，deg!
		单独设置围绕某个轴（X  Y）
			transform:rotateX()
			transform:rotateY()
d.倾斜：transform:skew();
		单独设置围绕某个轴（X  Y）
			transform:skewX()
			transform:skewY()


补充：如果有两个功能函数：先写位移 再写旋转。

Copier après la connexion

Exemple de rotation séparé :

Quand autour Quand le point central :

span{
            display: block;
            width: 300px;
            height: 150px;
            background: purple;
            transform: rotate(30deg);
        }

Copier après la connexion

Quelles sont les trois principales propriétés danimation de CSS3
Quand autour de l'axe X :

span{
            display: block;
            width: 300px;
            height: 150px;
            background: purple;
            transform: rotateX(30deg);
        }

Copier après la connexion

Quelles sont les trois principales propriétés danimation de CSS3
Vous pouvez voir que lors de la rotation autour de l'axe X, le haut de la boîte va vers l'intérieur et le bas sort .

Lorsque autour de l'axe Y :

 span{
            display: block;
            width: 300px;
            height: 150px;
            background: purple;
            transform: rotateY(30deg);
        }

Copier après la connexion

Quelles sont les trois principales propriétés danimation de CSS3
Vous pouvez voir que le côté gauche de l'image est vers l'extérieur et le côté droit est vers l'intérieur.

3D

form 3D space: transform-style:preserve-3d

a.位移：
	transform:translate(x,y,z);
            translateX()
            translateY()
            translateZ(不能是百分比)  
b.旋转：
	transform:rotate();
            rotateX()
            rotateY()
            rotateZ()  //默认情况效果类似
            rotate3D(x,y,z,a)   [ 0不旋转。1旋转 ]
                - x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
                - y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
                - z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
                - a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

Copier après la connexion

3.animation

制定关键帧：
	@keyframes 关键帧的名称{
        from{}
        to{}
     或者
        0%{
        }
        50%{
        }
        100%{
        }
    }
调用关键帧
    animation:  复合属性
		animation-name   关键帧的名称
        animation-duration   动画的持续的时间
        animation-timing-function   动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线 step-start  //没有动画中间的过渡效果。每次直接跳到下一帧开始的地方）
        animation-delay  动画的延迟
        animation-iteration-count   动画运动的次数（默认情况下运动1次） infinite(无限循环)
        animation-direction  运动的方向
                属性值：
                    - reverse：反方向运行 （ 让关键帧从后往前执行 ）
                    - alternate：动画先正常运行再反方向运行，并持续交替运行
                    - alternate-reverse：动画先反运行再正方向运行，并持续交替运行
        animation-play-state 
                属性值：
                    paused暂停
                    running运动
	常用的写法：
    		animation:关键帧的名称  动画运动的时间  linear(匀速)  动画延迟的时间

Copier après la connexion

Exemple :

<!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>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:300px;
            height:300px;
            position:fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
            /* 3D的空间 */
            transform-style: preserve-3d;
            /* 为了方便观察让3D舞台转动角度 */
            transform:rotateX(20deg) rotateY(30deg);
            transition:2s;
            animation: hh 2s linear infinite;
        }
        .box p{
            width:300px;
            height:300px;
            text-align: center;
            line-height:300px;
            font-size: 100px;
            font-weight:bolder;
            color:#fff;
            /* 让6个面全部定位在父元素里面 */
            position:absolute;
            left:0;top:0;
            /* 透明 */
            opacity:1;
            border:2px solid #000;

            /* 使背面不可见！ */
            backface-visibility:hidden;
        }
        .con1{
            /* 第一个面往前走 */
            background:red;
            transform:translateZ(150px);
        }
        .con2{
            /* 第二个面往后走 */
            background:blue;
            transform:translateZ(-150px) rotateY(180deg); /*rotateY(180deg)  让正面朝外*/
        }
        .con3{
            /* 先往上位移150px  再绕着X轴转动90deg */
            background:pink;
            transform:translateY(-150px) rotateX(90deg);
        }
        .con4{
            /* 先往下位移150px,再绕着X轴转动90deg */
            background:green;
            transform:translateY(150px) rotateX(-90deg);
        }

        .con5{
            /* 先往左位移150px , 再绕着Y轴转动90deg */
            background:rosybrown;
            transform:translateX(-150px) rotateY(-90deg);
        }
        .con6{
            /* 先往右侧位移150px,再绕着Y轴转动90deg */
            background:#000;
            transform:translateX(150px) rotateY(90deg);
        }
        @keyframes hh{
            from{
                transform:rotateX(-20deg) rotateY(0deg) ;
            }
            to{
                transform:rotateX(340deg) rotateY(360deg) ;
            }
        }
    </style>
</head>
<body>
    <p class="box">
        <p class="con1">1</p>
        <p class="con2">2</p>
        <p class="con3">3</p>
        <p class="con4">4</p>
        <p class="con5">5</p>
        <p class="con6">6</p>
    </p>
</body>
</html>

Copier après la connexion

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!