css3 具有不同持续时间的多个动画
css3 multiple animations with different durations
是否可以使用 CSS3 动画为元素提供多个具有不同持续时间的动画?
我最终想要的是完成后有球保持旋转。我知道我可以通过提供多个 类 来做到这一点。但我想避免这种情况,以防止出现混乱的 类.
(Fiddle 可能无法在除 Chrome 以外的其他浏览器上运行,我只是迅速将其整合在一起)
Fiddle 我目前拥有的示例 http://jsfiddle.net/cchsh6om/2/
这是CSS
div {
margin: 20px;
width: 100px;
height: 100px;
border-radius: 46px;
position: relative;
background: #ddd;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-out;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
span{
position: absolute;
line-height: 100px;
left:48%;
}
@-ms-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-ms-transform: rotate(0deg); }
to {
opacity: 1;
margin-left: 20px;
-ms-transform: rotate(-360deg); }
}
@-moz-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-moz-transform: rotate(0deg);
}
to {
opacity: 1;
margin-left: 20px; -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-webkit-transform: rotate(0deg); }
to {
opacity: 1;
margin-left: 20px;
-webkit-transform: rotate(-360deg); }
}
@keyframes spin {
from {
opacity: 0;
margin-left: 200px;
transform:rotate(0deg);
}
to {
opacity: 1;
margin-left: 20px;
transform:rotate(-360deg);
}
}
还有 HTML
<div><span>=</span></div>
是的,有可能,但您的语法有误。首先,使用像 animation: horizontal linear 8s infinite
这样的简短符号(有关更多信息,请阅读 acticle)。然后你可以在同一个元素上应用以逗号分隔的多个动画:
animation: horizontal linear 8s infinite,
vertical ease-in-out 1.3s infinite alternate,
blink linear .7s infinite alternate,
rotation linear .4s infinite;
并为它们中的每一个定义关键帧:
@keyframes horizontal {
from {left: 0;}
to {left: 100%;}
}
@keyframes vertical {
from {top: 0;}
to {top: 200px;}
}
最后,您可以省略 -moz
和 -ms
前缀。 -webkit-animation
和 animation
适用于所有现代浏览器,包括移动设备。
在 CodePen 查看我的多个动画示例,我已经在许多平台上对其进行了测试。
是否可以使用 CSS3 动画为元素提供多个具有不同持续时间的动画?
我最终想要的是完成后有球保持旋转。我知道我可以通过提供多个 类 来做到这一点。但我想避免这种情况,以防止出现混乱的 类.
(Fiddle 可能无法在除 Chrome 以外的其他浏览器上运行,我只是迅速将其整合在一起)
Fiddle 我目前拥有的示例 http://jsfiddle.net/cchsh6om/2/
这是CSS
div {
margin: 20px;
width: 100px;
height: 100px;
border-radius: 46px;
position: relative;
background: #ddd;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-out;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
span{
position: absolute;
line-height: 100px;
left:48%;
}
@-ms-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-ms-transform: rotate(0deg); }
to {
opacity: 1;
margin-left: 20px;
-ms-transform: rotate(-360deg); }
}
@-moz-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-moz-transform: rotate(0deg);
}
to {
opacity: 1;
margin-left: 20px; -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-webkit-transform: rotate(0deg); }
to {
opacity: 1;
margin-left: 20px;
-webkit-transform: rotate(-360deg); }
}
@keyframes spin {
from {
opacity: 0;
margin-left: 200px;
transform:rotate(0deg);
}
to {
opacity: 1;
margin-left: 20px;
transform:rotate(-360deg);
}
}
还有 HTML
<div><span>=</span></div>
是的,有可能,但您的语法有误。首先,使用像 animation: horizontal linear 8s infinite
这样的简短符号(有关更多信息,请阅读 acticle)。然后你可以在同一个元素上应用以逗号分隔的多个动画:
animation: horizontal linear 8s infinite,
vertical ease-in-out 1.3s infinite alternate,
blink linear .7s infinite alternate,
rotation linear .4s infinite;
并为它们中的每一个定义关键帧:
@keyframes horizontal {
from {left: 0;}
to {left: 100%;}
}
@keyframes vertical {
from {top: 0;}
to {top: 200px;}
}
最后,您可以省略 -moz
和 -ms
前缀。 -webkit-animation
和 animation
适用于所有现代浏览器,包括移动设备。
在 CodePen 查看我的多个动画示例,我已经在许多平台上对其进行了测试。