Rumah >hujung hadapan web >tutorial css >运用css3动画需要运用什么规则
运用css3动画需要运用什么规则
- (*-*)浩asal
- 2019-05-31 18:00:135615semak imbas
CSS3 @keyframes 规则
标签定义及使用说明
使用@keyframes规则，你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成。（推荐学习：CSS3视频教程。）
为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。.
语法
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 |
说明 |
| animationname |
必需的。定义animation的名称。 |
| keyframes-selector |
必需的。动画持续时间的百分比。 合法值： 0-100% 注意： 您可以用一个动画keyframes-selectors。 |
| css-styles |
必需的。一个或多个合法的CSS样式属性 |
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3</title>
<style>
div
{
width:100px;
height:100px;
background:blue;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; background:blue; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:blue; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>
<div></div>
</body>
</html>Atas ialah kandungan terperinci 运用css3动画需要运用什么规则. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
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
Artikel sebelumnya：《CSS权威指南》怎么样Artikel seterusnya：css动画用什么规则