Rumah > hujung hadapan web > html tutorial > CSS3中transform,transition和animation的简介和用法示例_html/css_WEB-ITnose

CSS3中transform,transition和animation的简介和用法示例_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:39:25
asal
1187 orang telah melayarinya

transform是一个属性,本质跟width,height是一样的,加上transform也就是为类增加一个变换属性。


transition是一个属性,它是用来控制过渡效果的,因为用transform可以增加变换效果,而那个变换是瞬间突变,如果想让这个变化是平滑的、过渡型的,则要用transition来控制,设定要控制的属性和过渡的时间即可。


animation是动画效果,要先用@keyframes定义一个动画过程,然后在类中用animation的各个参数制定想要添加的动画名称,运行时间,运行次数等等。


/* Float using transition */

.float {

    transition-property: transform;

    transition-duration: .3s;

}

.float:hover {

    transform: translateY(-5px);

}



/* Pulse using animation*/

@keyframes pulse {

    25% {

        transform: scale(1.1);

    }

    75% {

        transform: scale(.9);

    }

}

.pulse {   } 

.pulse:hover {

    animation-name: pulse;

    animation-duration: 1s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}

版权声明:本文为博主原创文章,未经博主允许不得转载。

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan