Dalam CSS3, nama atribut animasi ialah "animasi", yang merupakan atribut singkatan yang digunakan untuk menentukan nama bingkai kunci terikat, masa animasi, lengkung kelajuan, kelewatan animasi, masa animasi dan sama ada untuk bermain dalam Animasi terbalik, sintaksnya ialah "animasi: namakan masa tunda kelajuan masa sama ada bermain dalam arah songsang".
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
atribut animasi ialah atribut singkatan yang digunakan untuk menetapkan enam atribut animasi:
nama-animasi
tempoh-animasi
fungsi-masa-animasi
penangguhan-animasi
kiraan lelaran-animasi
arah-animasi
Nota: Sentiasa nyatakan atribut tempoh animasi, jika tidak, Jika tempohnya ialah 0, animasi tidak akan dimainkan.
Sintaksnya ialah:
animation: name duration timing-function delay iteration-count direction;
Nilai yang diwakili oleh parameter ialah:
Contohnya adalah seperti berikut :
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p>
<div></div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Apakah nama sifat animasi css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
