Apakah sifat yang digunakan peralihan css3?

Atribut yang digunakan dalam peralihan css3 ialah: 1. peralihan-sifat; 3. peralihan-tempoh-fungsi;

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

Peralihan CSS3 ialah kesan elemen yang berubah secara beransur-ansur dari satu gaya ke gaya yang lain.

Untuk mencapai ini, dua perkara mesti ditentukan:

• Nyatakan sifat CSS untuk menambah kesan

• Nyatakan tempoh kesan.

Melalui atribut peralihan, pembangun bahagian hadapan web boleh melaksanakan kesan interaksi animasi mudah tanpa JavaScript Untuk mencapai ini, satu perkara mesti dilaksanakan, iaitu tempoh kesan yang ditentukan.

atribut peralihan css3

Atribut komposit

Dari empat sub-atribut peralihan ini, hanya . Antaranya, dan Apabila dua masa berlaku pada masa yang sama, yang pertama ialah , dan yang kedua ialah ; apabila hanya ada satu masa, ia adalah dan ialah nilai lalai 0

transition: <transition-property> || <transition-duration> || 
<transition-timing-function> || <transition-delay></transition-delay></transition-timing-function></transition-duration></transition-property>

[Nota] Empat sub-sifat peralihan ini tidak boleh dipisahkan dengan koma, tetapi hanya boleh dipisahkan dengan ruang. Kerana yang dipisahkan dengan koma mewakili atribut yang berbeza (atribut peralihan menyokong berbilang nilai, bahagian berbilang nilai akan diperkenalkan kemudian); dan yang dipisahkan oleh ruang mewakili empat sub-atribut peralihan bagi atribut yang berbeza.

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            transition: 2s;/*代表持续时间为2s，延迟时间为默认值0 */
            /* transition: 1s 2s; 代表持续时间为1s，延迟时间为2s */
        }
        .test:hover {
            width: 300px;
        }

    <div class="test"></div>

Sub-harta berkaitan

1. property Atribut

transition-property menentukan kesan peralihan nama atribut CSS (kesan peralihan akan memulakan perubahan atribut CSS yang ditentukan). tiada: tiada gaya ditentukan, semua: nilai lalai, menunjukkan bahawa semua gaya elemen yang ditentukan menyokong atribut sifat peralihan. : gaya peralihan, anda boleh menulis berbilang gaya yang dipisahkan dengan koma.

Nota: Sentiasa nyatakan atribut transition-duration, jika tidak, tempohnya ialah 0 dan peralihan tidak akan memberi kesan.

1), gaya boleh peralihan

Bukan semua nilai gaya CSS boleh dialihkan, hanya atribut dengan nilai perantaraan mempunyai kesan peralihan, seperti berikut

颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            background-color: lightblue;
            transition: width 2s, background-color 2s ease 0.5s;
            /*代表width持续时间为2s，延迟时间为默认值0；
              background-color持续时间2s 延迟0.5s */
        }

        .test:hover {
            width: 300px;
            background-color: indianred;
        }

Perenderan:

2. Atribut tempoh peralihan

transition-duration menentukan masa yang diperlukan untuk menyelesaikan kesan peralihan ( dalam saat atau milisaat). Nilai lalai: 0s.

[Nota] Atribut ini tidak boleh negatif.

[Nota] Jika atribut ialah 0s, ia adalah nilai lalai, jika ia adalah 0, ia adalah nilai tidak sah. Jadi anda mesti membawa unit.

[Nota] Apabila nilai ialah nilai tunggal, iaitu, semua atribut peralihan sepadan dengan masa yang sama; apabila nilai adalah berbilang nilai, atribut peralihan sepadan dengan tempoh dalam susunan.

3. Fungsi pemasaan peralihan

transition-timing-function menentukan kelajuan kesan pensuisan. Ia boleh mengambil beberapa nilai. Nilai lalai: mudah.

4、transition-delay

transition-delay属性指定何时将开始切换效果，值是指以秒为单位（S）或毫秒（ms）。默认值：0s。

[注意]该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果 [注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位 。

[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间 。

过渡阶段

• 过渡开始时间=样式改变的时刻+过渡延迟时间；而过渡结束时间=过渡开始时间+过渡持续时间。

• 过渡起始值=过渡前的过渡属性值；而过渡结束值=过渡完成后的过渡属性值 。

• 过渡分为两个阶段：前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束时的瞬时值

• 以hover为例，若在元素非hover态时设置transition，相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition，则前进状态以hover态设置的为准，而反向状态以非hover态设置的为准 。

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            transition: 3s;/* 设置反向状态 */
        }
        .test:hover {
            width: 300px;
            transition: 100ms;
        }

效果:

触发方式

一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等 。

• hover ： 鼠标悬停触发 。

• active ： 用户单击元素并按住鼠标时触发 。

• focus ： 获得焦点时触发。

• @media触发 ： 符合媒体查询条件时触发 。

/* 把浏览器的宽度拖动到小于1000px时触发 */
@media (max-width: 1000px){
    .test{
        width: 500px;
    }
}

（学习视频分享：css视频教程）

Atas ialah kandungan terperinci Apakah sifat yang digunakan peralihan css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!