为什么不是这个CSS动画工作？

-1

我刚刚开始学习使用CSS的关键帧，但我并没有像我以前那样真正理解它。将其与其他动画布局进行比较时，这看起来很相似，但由于某种原因不起作用。为什么这不正常工作？为什么不是这个CSS动画工作？

<!doctype html> 
<html> 
<head> 
<title>Team Extrapolation</title> 
<style> 
@keyframes header 
{ 
0% {transform: rotate(0deg);down:0px} 
50% {transform: rotate(0deg);down:50px} 
100% {transform: rotate(0deg);down:0px} 
} 
#header { 
animation-iteration-count: infinite; 
animation-delay: 2s; 
animation-timing-function: ease-in-out; 
border-radius:5px; 
padding: 10px 
} 
</style> 
</head> 
<body> 
<div id="header">Team Extrapolation</div> 
</body> 
<html>

来源

2016-03-04 ZacharyJ

您需要定义它是什么** **应该做 –

嘛，考虑'down'不是有效的CSS属性，我会假设，就是它了。 –

什么样的CSS属性是'down'？我不认为这是存在的。目前，您的动画转换不会执行任何操作......不会执行任何操作，并且“down”属性无效。不仅如此，在您的动画中，您永远不会告诉'＃header'您想使用哪种关键帧动画。看看这个关于动画的CSS3教程 - 应该帮助你实现你需要的任何东西：http://css3.bradshawenterprises.com/ – Adjit

这里是设置动画属性

注意我如何添加关键帧名字“头”，以及对动画属性的正确道路。

@keyframes header 
 
{ 
 
    0% {transform: rotate(0deg); padding-top: 0px} 
 
    50% {transform: rotate(-45deg); padding-top: 50px} 
 
    100% {transform: rotate(0deg); padding-top: 0px} 
 
} 
 
#header { 
 
    animation: header 2s ease-in-out infinite; 
 
    border-radius:5px; 
 
    padding: 10px; 
 
}

<div id="header">Team Extrapolation</div>

来源

2016-03-04 20:01:22 LGSon

我不认为'变换'是必要的... –

@JacobGray我也没有，虽然OP可能是打算使用它们，所以我让他们......我现在增加了一个值:) – LGSon

为什么不是这个CSS动画工作？

回答

相关问题