@keyframes规则用于指定动画规则，定义一个CSS动画的一个周期的行为。动画是使用可变的CSS样式创建的；在动画期间， CSS属性可以多次更改。
语法:
@keyframes animation-name {keyframes-selector {css-styles;}}
animation-name: 这是必须的，它定义动画名称
keyframes-selector:定义动画的百分比，它介于0%到100%，一个动画可以包含许多选择器。
/* 定义动画*/
@keyframes your-animation-name {
/* style rules */
}
/*将其应用于元素*/
.element {
animation:your-animation-name 1s ...
}
例如:
@keyframes change-bg-color {
0% {
background-color:red;
}
100% {
background-color:blue;
}
}
也可以使用from和to，他们是等价的
@keyframes change-bg-color {
from {
background-color:red;
}
to {
background-color:blue;
}
}
<!DOCTYPE html>
<html>
<head>
<title>@keyframes</title>
<style type="text/css">
html,body {height: 100%;}
.container { min-width: 320px; max-width:500px; height: 100%; overflow: hidden; }
.text{ font-size: 3em; font-weight: bold; color:#0099cc; transform-origin: left center; -webkit-animation: fall 30s infinite; animation: fall 30s infinite; }
@keyframes fall {
from
{
-webkit-transform: rotate(0) translateX(0);
transform: rotate(0) translateX(0);
opacity: 1; }
to {
-webkit-transform: rotate(90deg) translateX(200px);
transform: rotate(90deg) translateX(200px);
opacity: 0; }
}
@-webkit-keyframes fall {
from {
-webkit-transform: rotate(0) translateX(0);
transform: rotate(0) translateX(0);
opacity: 1; }
to {
-webkit-transform: rotate(90deg) translateX(200px);
transform: rotate(90deg) translateX(200px);
opacity: 0; }
}
</style>
</head>
<body style="text-align: center;">
<div class="container">
<p class="text">Falling Text</p>
</div>
</body>
</html>
效果图:
效果图
网友评论