「网易官方」极客战记（codecombat）攻略-网页开发2-动物形象-animania

(点击图片进入关卡)

是关于压缩和压缩元素的动画！

简介

“动画”和 “@关键帧” 会将动画混合在一起。

img {

    animation: grow 3s infinite;

}

@keyframes grow {

    from {

        

    }

    to {

        

    }

}

默认代码

 

"/file/db/thang.type/529ab1a24b67a988ad000002/portrait.png">

"/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

}

动物形象 解法

 

"/file/db/thang.type/529ab1a24b67a988ad000002/portrait.png">

"/file/db/thang.type/52cee45a76ebd5196b00003a/portrait.png">

 

本攻略发于极客战记官方教学栏目，原文地址为：

https://codecombat.163.com/news/jikezhanji-dongwuxingxiang

极客战记——学编程，用玩的！