CSS3-自定义动画-keyframes-animation和第三方动画库animation4.css的使用

一、自定义动画

是动画的终极解决方案。

相当于将GIF做的事情用代码来实现。

步骤如下:

1. 定义关键帧 –设计动画的过程

@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

使用@keyframes定义动画有点类似于JS的定义函数:function 函数名(){}

@keyframes  动画的名字{
    //不同的状态(帧-起点第二个点第三个点。。。最后一个点)
    //起点 from 0%
    from{
        //写任意的样式(盒模型、透明度、颜色、定位属性、transform等样式)
    }
    //其他状态可以用百分比来表示
    50%{
    }
    70%{
    }
    //to改为100%
    to{
        //终点(写任意的样式(盒模型、透明度、颜色、定位属性、transform等样式))
    }
}

//动画:起点改为不同的样式的值
//比如:
@keyframes dong{
    from{
        left:0;
    }
    to{
        left:100px
    }
}
//让小盒子从0到100px进行移动

定义动画跟标签无关。动画是独立的,与元素无关。要关联需要使用animation调用动画。

2. 调用动画 animation 是样式属性

类似于JS的调用函数:函数名();

使用原则:你要让谁有动画效果,就给谁调用动画。即animation写在要动画的元素的样式上。

//调用动画需要使用一个属性来调用:它相当于是transition的角色,比transition多3个属性。
animation:动画的名字 持续时间 [延迟时间 运动形式  动画的次数  是否来回运动];
比如:
animation:dong 1s;

以上可以拆为如下属性:
所有animation属性:
    animation-name: myfirst;/*@keyframes动画名称*/
    animation-duration: 5s;/*动画完成一个周期所花费的秒或毫秒。默认是 0。*/
    animation-delay: 2s;/*动画何时开始。默认是 0*/
    animation-timing-function: linear;/*动画的速度曲线。默认是 "ease"。*/
    animation-iteration-count: infinite;/*动画被播放的次数。默认是 1。*/值n、infinite(无限次)*/
    animation-direction: alternate;/*动画是否在下一周期逆向地播放。默认是 "normal"。也就是偶数次会改变动画方向,动画交替的执行*/    
    animation-play-state: running;/*动画是否正在运行或已暂停,值running、paused*/
    animation-fill-mode : none | forwards(最后一帧) | backwards | both;  /*规定动画在播放之前或之后,其动画效果是否可见。*/

二、第三方的动画库animation.css的学习

免去了设计动画的烦恼,可以直接使用它提供的丰富的动画效果。该动画库是一个样式文件。

直接导入到项目中,调用即可。

  1. 导入

    <link href="animate.min.css">
  2. 使用

    1、基本用法:
    在需要动画的元素上添加class,比如:
           class="animate__animated animate__bounce"
           class="animate__animated animate__改为动画的名字"
    
    2、更丰富的用法,在上面2个基础class的基础上可以继续添加配置:
    添加延迟class:
       animate__delay-2s    2s
       animate__delay-3s    3s
       animate__delay-4s    4s
       animate__delay-5s    5s
    
    添加速度的class: 默认不写是1秒
    animate__slow   2s
    animate__slower 3s
    animate__fast   800ms
    animate__faster 500ms
    
    添加动画次数:默认是1次
    animate__repeat-1   1
    animate__repeat-2   2
    animate__repeat-3   3
    animate__infinite   infinite
    1. 详细的例子
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <!-- 1\导入动画库样式 -->
       <link rel="stylesheet" href="css/animate.min.css">
    </head>
    <body>
       <!-- 2、用 
    
           class="animate__animated animate__bounce"
           class="animate__animated animate__改为动画的名字"
                       启用动画      用何种动画
       -->
       <!-- 1、基础用法 -->
       <img class="animate__animated animate__bounce" src="https://www.imqd.cn/wp-content/themes/imqd/images/logo.jpg" >
       <img class="animate__animated animate__swing" src="https://www.imqd.cn/wp-content/themes/imqd/images/logo.jpg" >
       <!-- 延迟2秒 -->
       <img class="animate__animated animate__tada animate__delay-2s" src="https://www.imqd.cn/wp-content/themes/imqd/images/logo.jpg" >
       <!-- 更快的动画效果 -->
       <img class="animate__animated animate__tada animate__fast" src="https://www.imqd.cn/wp-content/themes/imqd/images/logo.jpg" >
       <!-- 无限次动起来 -->
       <img class="animate__animated animate__tada animate__infinite" src="https://www.imqd.cn/wp-content/themes/imqd/images/logo.jpg" >
    </body>
    </html>

    更多例子请在文章下方下载相应物料和案例。

CSS3动画素材下载

需要下载阿里网盘,不是vip也可以高清:https://pages.aliyundrive.com/mobile-page/web/beinvited.html?code=8b0925d

相关单词

  1. from 从。。 form
  2. to 到
  3. keyframes 关键帧
  4. animation 动画 animate
  5. infinite 无限
  6. alternate 交替执行
此资源下载链接已被无情的隐藏,请输入验证码解锁:
验证码

请关注本站公众号回复“验证码”,获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 1,412
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top