CSS CSS3 缩放动画关键帧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17767759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Scale Animation Keyframes
提问by Nicholas Ritson
having a few issues using css3 animation scale, opacity and other things work but cant seem to get scale to work.
在使用 css3 动画比例、不透明度和其他东西时遇到一些问题，但似乎无法按比例工作。
snippet:
片段：
#treeLeaves {
background: url(https://i.pinimg.com/originals/72/c0/8e/72c08eefa235ae1c8aa72caa71eeba39.jpg);
background-repeat:no-repeat;
width:100%;
height:375px;
z-index:5;
position:absolute;
bottom:140px;
left:0px;
}
@keyframe leaves {
0% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
100% {
transform: scale(2.0);
-webkit-transform: scale(2.0);
}
}
#treeLeaves {
animation: leaves 5s ease-in-out infinite alternate;
-webkit-animation: leaves 5s ease-in-out infinite alternate;
}<div id="treeLeaves"></div>
<div class="leaves">basically its 1 img that i wanted to scale up and down constantly over time. only using webkit because it only needs to work in chrome.
基本上它的 1 个 img，我想随着时间的推移不断放大和缩小。只使用 webkit，因为它只需要在 chrome 中工作。
thanks.
谢谢。
回答by Brice Lin
I think you forgot the 's' in keyframes. try @keyframes and @-webkit-keyframes.
我想你忘记了关键帧中的“s”。试试@keyframes 和@-webkit-keyframes。
回答by Shishir Morshed
You just missed sin keyframeskeyword.
你只是错过s了keyframes关键字。
@keyframes leaves {
0% {
transform: scale(1.0);
}
100% {
transform: scale(2.0);
}
}
回答by Lanvin Kgoale
@-webkit-keyframes scaling {
From {
-webkit-transform: scale(1.0);
}
To {
-webkit-transform: scale(2.0);
}
#treeLeaves {
-webkit-animation: scaling 5s infinite alternate;
}
