- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
根据Animation Spec :
If a ‘0%’ or ‘from’ keyframe is not specified, then the user agent constructs a ‘0%’ keyframe using the computed values of the properties being animated. If a ‘100%’ or ‘to’ keyframe is not specified, then the user agent constructs a ‘100%’ keyframe using the computed values of the properties being animated.
这会导致两种不同的解释:
A) 在 0%
或 from
中而不是声明属性关键帧。
B) 在0%
或from
关键帧和类中声明属性.
p:first-of-type {
opacity: 0;
animation: a 3s linear infinite alternate;
}
@keyframes a {
100% {
opacity: 1;
}
}
p:last-of-type {
opacity: 0;
animation: b 3s linear infinite alternate;
}
@keyframes b {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<p>
A) Declare the property in the class <strong>and not</strong> in the `0%` or `from` keyframe.
</p>
<p>
B) Declare the property in the class <strong>and </strong> in the `0%` or `from` keyframe.
</p>
虽然两者具有相同的最终结果,但在 Don't Repeat Yourself (DRY) 之后原则上,A) 可以大大减少所有使用多个属性的动画的代码。
/*
Layout
*/
* {
box-sizing: border-box;
}
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
counter-reset: list-item;
}
.container > li {
position: relative;
counter-increment: list-item;
}
.container > li::before {
content: counter(list-item, upper-alpha);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-size: 1.5em;
background-color: moccasin;
}
.container > li::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
height: 2px;
background-color: gold;
}
/*
SVG
*/
.svg-spritesheet {
display: none;
}
.svg__icon {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
}
.svg__icon--square {
font-size: 5em;
color: dodgerblue;
}
/*
Question Related
*/
.container > li:first-of-type .svg__icon--square {
opacity: 0;
transform: scale(.5) rotate(45deg);
animation: animationA 5s linear infinite alternate;
}
.container > li:nth-child(2) .svg__icon--square {
opacity: 0;
transform: scale(.5) rotate(45deg);
animation: animationB 5s linear infinite alternate;
}
@keyframes animationA {
to {
opacity: 1;
transform: translateX(500px) scale(1) rotate(90deg);
}
}
@keyframes animationB {
from {
opacity: 0;
transform: scale(.5) rotate(45deg);
}
to {
opacity: 1;
transform: translateX(500px) scale(1) rotate(90deg);
}
}
<ul class="container">
<li>
<svg class="svg__icon svg__icon--square">
<use xlink:href="#svg-icon-square"></use>
</svg>
</li>
<li>
<svg class="svg__icon svg__icon--square">
<use xlink:href="#svg-icon-square"></use>
</svg>
</li>
</ul>
<svg class="svg-spritesheet">
<symbol id="svg-icon-square" viewBox="0 0 32 32">
<title>Demo Square</title>
<rect width="32" height="32" fill="currentColor" />
</symbol>
</svg>
如果已在应用动画的类中声明了某个属性,那么从 CSS 动画的 0%
关键帧中删除该属性是否安全?
正在这样做:
.el {
opacity: 0;
animation: example 1s;
}
@keyframes example {
100% {
opacity: 1;
}
}
跨浏览器是否安全?还是期望用户代理呈现不同的结果或性能?
渲染相同的结果:
Windows 10/64 位
最佳答案
属性的计算值可能会有所不同,具体取决于应用于给定元素的 CSS 规则、这些规则的特殊性、元素是否具有该属性的内联样式声明、脚本是否正在修改该属性的值运行时的属性等。
如果您希望动画从一个可预测的固定值开始,您需要在 0% 关键帧中指定该值,这样它就不会从当时的计算值开始动画动画开始。
如果您可以保证在动画开始时该元素的计算值始终是一个常量值,则可以省略 0% 关键帧。如果您希望动画始终从当时的计算值开始(如果它可以更改),则必须省略 0% 关键帧。
类似的规则适用于 100% 关键帧:如果动画需要以固定值结束而不管计算值可能是什么,则需要指定 100% 关键帧;否则,如果它需要以与计算值相同的值结束,则需要将其省略。
关于css - 如果已经在应用动画的类中声明了某个属性,那么从 CSS 动画的 `0%` 关键帧中删除该属性是否安全?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40366905/
是否有一个 FFMPEG 命令,如果我们传递一个视频文件,在每个场景更改时它都应该为它生成一个关键帧。我理解的关键帧是视频的一系列文件(图像或视频)文件,可用于在视频悬停时播放。请让我们知道我们是否可
我正在切换我通过带有 JQuery 的 toggleClass 触发的一系列动画/过渡。 其中一个动画正在使用以下内容: .header { transition: all .3s ease-
我有一些图片可以在关键帧中很好地滚动 @-webkit-keyframes headImage /* Safari and Chrome */ { 0% {background:url(../imag
尝试用 jQuery 制作一个简单的重复关键帧动画 $(document).ready(function() { $('body').mouseover(function() {
我在 richard bradshaw 找到了一个关于 css3 transitions 的很好的教程,可以在 http://css3.bradshawenterprises.com/cfimg/ 我
我正在尝试使用@keyframes 为背景交换设置动画。背景是径向渐变。背景发生变化,但不是动画。 #mydiv { background: radial-gradient(circle at 90%
如果单击按钮 2,您将看到动画运行。但是,当我使用另一个功能对按钮进行更改(选中复选框以显示。隐藏按钮)时,动画会再次运行,就像再次按下一样。 如何防止每次单独的函数对按钮进行更改时触发动画?即在切换
所以我创建了图像生成器(生成 RGB 的非常简单的一个)我希望能够将一定数量的图像转换为 H264 关键帧+相关帧(lats 说 100)所以在生成的每 100 帧上我需要将它们编码为 H264 .怎
我一直在尝试自学一些带有关键帧的 css 动画,我正在尝试创建一些东西,其中有一个小方 block 落下,然后从那个方 block 中,一个矩形从左边突出,然后显示一些大约 8 秒后发短信,然后 re
我意识到我不能简单地通过用逗号分隔@keyframes mymove、@-moz-keyframes mymove 等来完成下面相同的代码。。为了让它们工作,我需要如下分别声明它们。 有什么方法可以将
恐怕有类似的问题,但我没有找到具体的解决方案,所以我创建了一个 fiddle : http://jsfiddle.net/Garavani/yrnjaf69/2/ TEXT
我有一个包含多个坐标的图像映射。但是,当我在上面放置一个关键帧 div (clouds) 时,这个不起作用,因为动画覆盖了 map 。最后一个 div 是一个动画,有一些云从图像上掠过。 html代码
所以我正在尝试为元素创建 Wifi 闪烁效果。首先圆圈应该是可见的,然后是上面的圆圈,依此类推。在所有符号都可见后,它应该等待 2 秒,然后重新开始。你可以在这里看到我的当前状态: http://js
我试图在单击按钮时显示一条消息。我想要“GO!”淡入/淡出表示游戏开始,但只有在单击开始按钮时才会出现。我现在正在尝试使用 jquery 和另一个来自老师的库的 javascript,它结合了鼠标点击
我正在尝试使用以下代码让对象在背景中从左向右浮动。不幸的是,当它离开屏幕时,尽管向类添加了 overflow-y: hidden 属性,但仍会出现垂直滚动条。我尝试了百分比(100% 与过渡)但它没有
我正在为将鼠标悬停在图形图像上时的弹跳效果创建关键帧。我的一切都正常工作,但是一旦动画完成..图标就会消失。 我知道它与电子邮件中设置的 translateY 属性有关,并在类里面链接。 在悬停时,我
你好我正在尝试模拟翻转倒数计时器但是当我编写代码时我发现两者之间存在差异: @keyframes zindex { 0% { z-index: 2; } 5% { z-index: 4
如果我有: @keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} 是否可以: @keyframes anim
我有一个弹出窗口,它在单击按钮时打开,然后在您单击另一个按钮或弹出窗口之外时关闭。我希望弹出窗口在打开时淡入并在关闭时淡出。如何使用 javascript 在两个关键帧之间切换? 我尝试通过使用 ja
我正在尝试使用 jquery Keyframes用于动态创建的关键帧动画。我的页面上有六个图标(可能更多),它们都需要设置为以下范围内的随机 x 和 y 值的动画: x = 1-5y = 13-20
我是一名优秀的程序员,十分优秀!