有没有一种方法可以精确地控制CSS元素的动画属性？
有没有一种方法可以精确地控制CSS元素的动画属性？
提问于 2018-06-11 08:17:55
我有这样的代码：
transition: all 0.35s;
transition-delay: 0.25s;
transition-timing-function: cubic-bezier(.79,0,.46,1);但事实证明，如果我添加更多我想要动画的属性，这将是有问题的，所以我希望做一些如下的事情：
transition: transform 0.35s/*duration*/ 0.25s /*delay*/ cubic-bezier(.79,0,.46,1),
opacity 0.25s/*duration*/ 1s /*delay*/ ease-in ;我查看了速记属性，但找不到正确的组合。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-11 08:46:03
是的，你想要的是一个css 动画，而不是一个css过渡。转换用于创建从一种状态到另一种状态的平滑转换，而动画则允许您通过更改css属性来定义更复杂的行为。
它看起来像这样：
element {
animation-name: yourAnimationName;
animation-timing-function: cubic-bezier(.79,0,.46,1);
animation-delay: 0.25s;
}
@keyframes yourAnimationName {
// here you define which css properties to animate
}您可以使用from和to定义关键帧：
@keyframes yourAnimationName {
from { background-color: red; }
to { background-color: yellow; }
}也可以使用百分比定义多个关键帧(占整个动画的百分比)：
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}如果你使用关键帧作为百分比，你也可能不需要你的三次贝塞尔计时函数。
我推荐阅读一些关于css动画HERE的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50789152
复制相关文章
相似问题