HTML Animation 前端就业课 第二阶段CSS 零基础到实战(06)

Posted 1_bit

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML Animation 前端就业课 第二阶段CSS 零基础到实战(06)相关的知识,希望对你有一定的参考价值。

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证。

一、Animation 基础

使用 Animation 可以设置帧动画,与 transition 区别于 transition 需要有状态对齐变换效果进行激活,而 Animation 则不用,并且 Animation 可以设置多个时间段的关键帧状态,但 transition 只有起始与最终的两个状态。

Animation 使用 @keyframes 定义其动画的关键帧内容,例如在其状态中的 1% 位置当前动画是什么状态,又或者 10%、30%以及100%最终状态如何,我们以下使用一个示例来说明:

<style>
@keyframes move 
    0%
	    top:0px;
	    left: 0px;
    
    30%
	    top:100px;
	    left: 300px;
    
    60%
	    top:900px;
	    left: 10px;
    
    100%
	    top:0px;
	    left: 0px;
    

</style>

以上示例中,@keyframes 为定义关键帧的“关键字”,而 move 为当前关键帧的名称,其花括号内为当前 move 的关键帧详情内容;其中 0%top:0px;left: 0px; 表示在 0%(状态最初时)关键帧的状态是距离 top 为 0px,left 左部 0px,随后这个动画运行到 30% 状态后的位置信息,接下来是 60% 以及 100%。

接着我们添加一个 div 样式示例:

<style>
.box
    width: 100px;
    height: 100px;
    background: #ff000d;
    animation:move 10s;

</style>

以上示例中,主要查看 animation,我们从以上样式中可以得知,animation 需要在定位布局中进行展示;animation:move 10s; 中得知,animation 是设置这个 div 的animation 属性,animation 属性可以设置两个值(暂时),一个是 move 表示需要使用到的关键帧,而 10s 是一个秒数单位,表示这个动画移动完成需要的时间数,最终我们运行如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Animation 帧动画 ——1bit 的前端课程</title>
    <style>
        @keyframes move 
		    0%
			    top:0px;
			    left: 0px;
		    
		    30%
			    top:100px;
			    left: 300px;
		    
		    60%
			    top:900px;
			    left: 10px;
		    
		    100%
			    top:0px;
			    left: 0px;
		    
		
        .box
            width: 100px;
            height: 100px;
            background: #ff000d;
            animation:move 10s;
        
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果如下:

animation 的关键帧还有一种写法,如下示例,直接设置起始和结束并没有设置多余的关键帧位置,其中 form 表示 0% 而 to 表示 100%:

<style>
@keyframes move 
    from 
        top:0px;left: 0px;
    
    to 
        top:100px;left: 300px;
    

</style>

我们还可以更改更多的内容让其实现动画,查看以下示例:

<style>
    @keyframes move 
        0%
            top:0px;
            left: 0px;
            background: #ff000d;
        
        30%
            top:100px;
            left: 300px;
            width:300px;
            background: #00ffaa;
        
        60%
            top:300px;
            left: 10px;
            background: #0059ff;
        
        100%
            top:0px;
            left: 0px;
            height:600px;
            background: #ff4800;
        
    
    .box
         width: 100px;
         height: 100px;
         background: #ff000d;
         transition:all 2s;
         animation:move 10s 3;
     
</style>

我们此时还需要查看 animation:move 10s 3;,其中这个数字 3 指的就是动画重复次数,若你想使其一直重复运行,将数字 3 改成 infinite 即可,效果如下:


若想使其速度是线性匀速,将 animation:move 10s 3; 改成 animation:move 10s infinite linear; 即可。

此时我们发现,该帧动画在最后一帧跳到第一帧时,动画效果太过突兀,咱们可以增加 alternate 值,这是一个交替动画,注意是交替动画,即 animation:move 10s infinite linear alternate;,效果如下:

以上是关于HTML Animation 前端就业课 第二阶段CSS 零基础到实战(06)的主要内容,如果未能解决你的问题,请参考以下文章

前端就业课 第二阶段CSS 零基础到实战(03)前端 CSS 动效 transition transform

CSS 零基础到实战(05)布局盒子模型弹性盒子前端就业课 第二阶段

前端就业课 第二阶段CSS 零基础到实战(04)定位

前端就业课 第二阶段CSS 零基础到实战(04)定位

前端就业课 第二阶段CSS 零基础到实战(02)标签类型字体与图片

CSS 零基础到实战(05)布局盒子模型弹性盒子前端就业课 第二阶段