(点击图片进入关卡)
是关于压缩和压缩元素的动画！
简介
“动画”和 “@关键帧” 会将动画混合在一起。
img {
animation: grow 3s infinite;
}
@keyframes grow {
from {
}
to {
}
}
默认代码
<!-- “关键帧”用于定义动画行为。 -->
<!-- 想想它就像写一个函数… -->
<!-- …它需要一个命名和行为。 -->
<!-- 关键帧与“动画”的属性要一起使用。 -->
<style>
#imageA {
/* 动画属性的设置需要3个参数！ */
/* 第一个是关键帧的名称。 */
/* 第二个问题是它应该持续多久。 */
/* 最后是它重复的次数。 */
animation:slide 5s 99;
}
#imageB {
animation:myAnim 0.1s 10;
}
/* 关键帧是一个特殊的CSS“规则”！ */
/* 它说明浏览器不仅仅是CSS */
@keyframes slide {
from {
transform: translateX(300%);
}
to {
transform: translateX(-300%);
}
}
@keyframes myAnim {
from {
/* 为开始添加属性。 */
}
to {
/* 为最终结果添加属性。 */
}
}
</style>
<img id="imageA" src=
"/file/db/thang.type/529ab1a24b67a988ad000002/portrait.png">
<img id="imageB" src=
"/file/db/thang.type/52cee45a76ebd5196b00003a/portrait.png">
# Should fill in some default source
概览
关键帧
@ keyframe CSS关键字用于为要使用的 animate 属性定义一个CSS属性路径。
from 是动画应该如何开始。
to 是动画最终应是什么样子。
/* keyName可以是任何名称，不过需要和'animate'调用时相同：* /
@keyframe keyName {
/* 此动画将以默认大小开始，随后增加到双倍大小。*/
from {
}
to {
transform: scale(2);
}
}
＃ 动画
animation CSS属性告诉浏览器如何显示元素。它会在一定的时间跨度上混合CSS属性。
img {
/* 在下面的示例中，10是重复次数。*/
/* 它可以是任何数字，甚至可以是单词infinite（无限次） */
animation: keyName 5s 10
}
动物形象 解法
<!-- “关键帧”用于定义动画行为。 -->
<!-- 想想它就像写一个函数… -->
<!-- …它需要一个命名和行为。 -->
<!-- 关键帧与“动画”的属性要一起使用。 -->
<style>
#imageA {
/* 动画属性的设置需要3个参数！ */
/* 第一个是关键帧的名称。 */
/* 第二个问题是它应该持续多久。 */
/* 最后是它重复的次数。 */
animation:slide 5s 99;
}
#imageB {
animation:myAnim 0.1s 10;
}
/* 关键帧是一个特殊的CSS“规则”！ */
/* 它说明浏览器不仅仅是CSS */
@keyframes slide {
from {
transform: translateX(300%);
}
to {
transform: translateX(-300%);
}
}
@keyframes myAnim {
from {
/* 为开始添加属性。 */
transform: rotate(45deg);
}
to {
/* 为最终结果添加属性。 */
transform: rotate(45deg);
}
}
</style>
<img id="imageA" src=
"/file/db/thang.type/529ab1a24b67a988ad000002/portrait.png">
<img id="imageB" src=
"/file/db/thang.type/52cee45a76ebd5196b00003a/portrait.png">