CSS从入门到精通——动画:简单的小动画

目录

任务描述

相关知识

创建动画

绑定元素

编程要求

任务描述

本关任务：用 CSS3 实现简单的小动画。效果图如下：

相关知识

为了完成本关任务，你需要掌握：1.创建动画，2.绑定元素。

创建动画

用 @keyframes来创建一个动画，然后把这个动画绑定到一个元素上就有效果了。

需要实现的效果图如下：

基本的html结构如下：

@keyframes
p{ font-size: 14px}

效果图如下：

先用@keyframes创建一个动画，这个动画表示字体会从20px变成40px。代码如下：

@keyframes bigfonts{
  from { font-size: 20px;}
   to  { font-size: 40px;}
}

说明：

• @keyframes表示创建动画，动画名称是 bigfonts；
• from表示这个动画的开始，to表示这个动画的结束；
• 动画发生的时间也可以用百分比来表示，0%是动画的开始，100%是动画的结束。from和to相当于0%和100%；

绑定元素

然后将动画bigfonts绑定到p元素上就可以了。代码如下：

p:hover{
   animation: bigfonts 2s ease;  
}

效果已经实现了。这里说明一下animation的属性值：

• bigfonts是动画的名称；
• 2s是动画一次完成的时间；
• ease表示动画的速度曲线，动画以低速开始，然后加快，在结束前变慢。默认也是ease；

编程要求

根据提示，在右侧编辑器补充代码，实现当滑动到p元素上时，宽度从100px变为400px的效果。要求如下：

• 动画名称为changeColor；
• 动画一次完成的时间为2s；
• 动画的速度曲线为ease-in;
• 这里动画的开始，结束用from，to；

为了方便评测， CSS 都是需要以分号;结尾的。

效果如下：

    
    
    
        * {
            margin: 0;
            padding: 0;
        }

        p {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: orange;
        }

        /************* Begin ************/
        /* 创建动画 */
        @keyframes changeColor {
            from {
                width: 100px;
            }
            to {
                width: 400px;
            }
        }


        /*绑定元素*/
        p:hover {
            animation: changeColor 2s ease-in;
        }


        /************** End **************/