css动画

怼烎@ 2022-10-29 13:20 358阅读 0赞

在CSS中主要通过@keyframes和animation来实现的：

@keyframes制定了一个元素的css样式变化的方式，也就是通过css央视的逐步改变，让它动起来，也就是动画。

与@keyframes配套使用的还有animation：

@keyframes规定了变化的方式，而animation规定了变化的对象,以及变化的效果

在CSS中他们的一般格式如下：

<style>
    div{
        width:100px;
        height:100px;
        background:yellow;
        animation: try 3s;
    }
    @keyframes try
    {
        0% {background:red}
        50%{background:blue}
        100{bakcground:red}
    }
    </style>

**animation**其实是所有动画的简写属性，而动画属性有：

animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animationo-fill-mode、animation-play-state

**下面对这些属性进行介绍：**

animation-name：规定了所要绑定的动画的名称

animation-duration：指定动画需要多少秒或者毫秒完成

animation-timing-function：规定了动画如何完成一个周期

linear 动画从头到位的速度是相同地

ease 慢快慢

ease-in 低速开始 ease-out低速结束 ease-in-out低速开始和结束

cubic-bezier（n，n，n，n）自己确定值，n在0到1内

animaton-delay：规定了动画在开始之前的延迟的时间

animation-iteration-count：规定了的动画播放的次数

n 就是播放n次

infinite 无限的播放

animation-direction：规定了是否轮流反向播放动画

normal 默认值，正常播放

reverse 反向播放

alternate 在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。

alternate-reverse 在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

animation-fill-mode：规定了当动画完成时或在延迟时索要应用到的样式。

none 默认值

forwards 动画停在最后位置

backwards 动画停在最初位置（默认）

animation-play-state：指定动画是否正在运行或者已经暂停

paused 暂停动画

running 运行动画

关于 **@keyframes**：

他有两种形式：

1、百分号的形式

@keyframes{
        0%{background:red;left:0px}
        50%{background:yellow;left:200px}
        100{background:red;left:0px}
    }

2、from…to…的形式

@keyframes{
        from{left:0px}
        to{left:200px}
        to{left:400px}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，358人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )

文章目录一、CSS3 动画简介二、CSS3 动画实现步骤三、动画定义四、代码示例一、CSS3 动画简介

我不是女神ヾ/ 2023年10月14日 15:47/ 0 赞/ 153 阅读

相关 CSS动画

效果图： ![20210420183258301.gif][] 实现效果描述: 子元素相对父元素水平垂直居中并重复循环放大缩小实现代码： <!DOCTYPE

Dear 丶/ 2023年01月14日 12:58/ 0 赞/ 161 阅读

相关 css 动画

上下滑动 html <div class="kaiqi">点击开启</div> css .kaiqi { color: ffffff;

川长思鸟来/ 2022年11月05日 05:24/ 0 赞/ 140 阅读

相关 css动画

在CSS中主要通过@keyframes和animation来实现的： @keyframes制定了一个元素的css样式变化的方式，也就是通过css央视的逐步改变，让它动起来，也

怼烎@/ 2022年10月29日 13:20/ 0 赞/ 359 阅读

相关【CSS 】动画animation

作为博主简单记录：深入学习请查看文末参考资料前面有提到过过渡效果[css transition][],实际上过渡效果也可以算作一种动画,这是这种动画是单次的不重复的，而且

╰半橙微兮°/ 2022年07月13日 08:14/ 0 赞/ 261 阅读

相关 CSS动画

CSS3 动画通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3 @keyframes

Bertha 。/ 2022年06月07日 02:51/ 0 赞/ 245 阅读

相关 css动画

纯CSS3实现的8种Loading动画效果<div class="load1" > <div class="loader">加载中</div>

系统管理员/ 2022年06月05日 08:42/ 0 赞/ 212 阅读

相关 css动画

动画移动时间 animation: move 13s; 一直移动,无限循环 animation-iteration-count: infinite; 从A移动到

叁歲伎倆/ 2022年06月05日 00:53/ 0 赞/ 229 阅读

相关 CSS动画

摘自阮一峰老师的博客 [http://www.ruanyifeng.com/blog/2014/02/css\_transition\_and\_animation.html]

喜欢ヅ旅行/ 2022年05月10日 00:54/ 0 赞/ 211 阅读

相关 CSS-动画

前言本文主要内容：过渡：transition 2D 转换 transform（scale，translate，rotate）

冷不防/ 2022年05月03日 09:30/ 0 赞/ 214 阅读