css - CSS动画：如何简写旋转角度的百分比?
@keyframes rotate360 { 0% { --rotate-angle: 0deg; } 100% { --rotate-angle: 360deg; } }我希望 --rotate-angle的值是随百分比进度增加；
除了0%{}..1%..2%...100%{} 这样，能简写吗？
共有2个答案
不需要一步一步写, 只需要写出需要特别设置的关键帧就行了, 比如需要旋转360度, 0% 设置为0, 100%设置为360就行, 同理想先右在下, 可以
<style> @keyframes rotate360 { 0% { left: 0; top: 0; } 50% { left: 20px; /* top: 0; */ } 100% { left: 20px; top: 30px; } } div { width: 100px; height: 100px; background-color: aqua; cursor: pointer; position: relative; } div:hover { animation-name: rotate360; animation-duration: 1s; background-color: beige; }</style><div></div>浏览器会根据所写的关键帧自动计算
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes#%...
将自定义属性定义为角度属性
@property --rotate-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg;}@keyframes rotate { 0% { --rotate-angle: 0deg; } 100% { --rotate-angle: 360deg; }}#el { rotate: var(--rotate-angle); animation: rotate 3s linear;}-
问题内容： 我想通过CSS旋转加载图标。 我有一个图标和以下代码： 但这是行不通的。如何使用CSS旋转图标？ 问题答案：
-
问题内容： 我希望div使用CSS从右角2滑入。 如果我仅使用[ngClass]来切换类并利用不透明性，则可以正常工作。但是li不想从一开始就渲染该元素，因此我先用ngIf“隐藏”了它，但是之后过渡将无法工作。 问题答案： 更新4.1.0 柱塞 另请参见https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2017-
-
我正在尝试制作一个“进度条”与动画，改变了酒吧的背景颜色。 该条在0%时应该以红色开始，当它穿过元素时，在100%时会变为绿色。我的工作是100%（不，颜色不是很好，但这是一个未来的问题）... null null 问题是（例如）在50%时，我无法使条“停止”在红色和绿色之间的50%过渡状态。 有没有一种方法可以计算颜色，因为它将在50%或让CSS停止过渡在一个特定的点？ 你可以看到如果我有50%
-
本文向大家介绍CSS画三角形?相关面试题，主要包含被问及CSS画三角形?时的应答技巧和注意事项，需要的朋友参考一下
-
问题内容： 我试图在CSS 中将a设置为一定的百分比高度，但它的大小与其中的内容相同。但是，当我删除HTML 5 时，它可以工作，并按需要占用整个页面。我希望页面进行验证，那我该怎么办？ 我在上有此CSS ，其ID为： 问题答案： 我正在尝试在CSS中将div设置为某个百分比高度 百分比是多少？ 要设置百分比高度，其父元素（*）必须具有明确的高度。这是不言而喻的，如果您将height保留为，则该块
-
本文向大家介绍CSS如何实现动画？相关面试题，主要包含被问及CSS如何实现动画？时的应答技巧和注意事项，需要的朋友参考一下 参考回答： 创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分。 transition也