Apakah tiga sifat animasi utama css3

Tiga atribut animasi utama CSS3 ialah: 1. Atribut peralihan, digunakan untuk menetapkan kesan peralihan elemen 2. Atribut Transform, digunakan untuk menggunakan transformasi 2D atau 3D (putaran, penskalaan, pergerakan atau kecondongan) kepada elemen; 3. Atribut animasi perlu digunakan bersama "@keyframes" untuk mencipta animasi.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

atribut animasi css3 terbahagi kepada: transform, 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： 动画的类型（匀速、匀加速、匀减速........）

Contohnya: 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()


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

Contoh putaran yang berasingan:

Apabila mengelilingi titik tengah:

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

Apabila diputar di sekeliling Bahagian atas masuk ke dalam dan bahagian bawah keluar.

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

Apabila mengelilingi paksi Y:

Anda boleh melihat bahawa sebelah kiri gambar adalah ke luar, dan sebelah kanan ialah Sisi ke dalam.

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

3D
Bentuk ruang 3D: transform-style:preserve-3d

3.animasi

Contoh:

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空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

(Mempelajari perkongsian video:

tutorial video css

)

制定关键帧：
	@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(匀速)  动画延迟的时间

Atas ialah kandungan terperinci Apakah tiga sifat animasi utama css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!