CSS3动画-程序员宅基地

技术标签：杂前端 html javascript

动画(animation)是CSS3中具有颠覆性的特征之一，可通过多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

1.动画的基本使用

制作动画分为两步：

1.先定义动画

2.再使用(调用)动画

1.用keyframes定义动画(类似定义类选择器)

2.元素使用动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画animation</title>
    <style>
        /* 我们想页面一打开，一个盒子就从左边走到右边 */
        /* 1.定义动画 */
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画序列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画序列</title>
    <style>
        /* 动画序列 */
        /* 1.可以做多个状态的变化  keyframe 关键帧 */
        /* 2.里面的百分比是整数 */
        /* 3.里面的百分比就是总的时间的划分 */
        @keyframes move {
            /* 0%的内容可以不写，也可以直接不写0% */
           0% {

           }
           25% {
               transform: translate(1000px, 0);
           }
           50% {
               transform: translate(1000px, 200px);
           }
           75% {
               transform: translate(0px, 200px);
           }
           100% {
               transform: translate(0, 0);
           }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 10s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画常用属性

速度曲线细节

animation-timing-function: 规定动画的速度曲线，默认是“ease”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>速度曲线步长</title>
    <style>
       div{
           font-size: 20px;
           width: 0;
           height: 30px;
           background-color: pink;
           /* steps就是分几步来完成我们的动画 有了steps就不用再写ease或者linear了 */
           animation: move 4s steps(10) forwards;
       }
       @keyframes move{
           0% {
               width: 0;
           }
           100% {
               width: 200px;
           }
       }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3动画常用属性</title>
    <style>
        @keyframes move {
           0% {
                transform: translate(0, 0);
           }
           100% {
               transform: translate(1000px, 0);
           }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 5s;
            /* 运动曲线 */
            animation-timing-function: ease;
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数 iteration 重复的   count 次数  infinite无限 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放  默认normal  想反方向就写alternate*/
            /* animation-direction: alternate; */
            /* 动画结束后状态默认backwards  回到起始状态 我们可以让他停留在结束状态forwards */
            animation-fill-mode: forwards;
        }
        div:hover {
            /* 鼠标经过div 让这个div 停止动画， 鼠标离开就继续动画 */
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画简写属性

animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

· 简写属性里面不包含animation-play-state

· 暂停动画：animation-play-state: paused; 经常和鼠标经过等其他配合使用

· 想要动画走回去，而不是直接跳回来：animation-direction: alternate

· 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

本文链接：https://blog.csdn.net/xy_is_fhh/article/details/121539469

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

MySQL修改my.cnf配置不生效的解决方法_mysql 修改配置文件不生效-程序员宅基地

文章浏览阅读6.2k次，点赞2次，收藏3次。1，参数没有写到 [mysqld] 下面而是写到配置文件的末尾处了，我今天犯的错就是这个2，没有重启3，没有退出当前会话4，修改派配置文件错误5，参数写错了，打脸6，修改了错误的配置文件这里只说了修改 my.cnf，并没有说清楚其绝对路径是哪个文件。也就是说，有可能修改的不是正确路径下的my.cnf文件。在MySQL中，是允许存在多个 my.cnf 配置文件的，有的能对整个系统环境产生影响，例如：/etc/my.cnf。有的则只能影响个别用户，例如：~/.my.cnf。M._mysql 修改配置文件不生效

SpringBoot扩展篇：Spring注入 @Autowired & @Resource_spring boot resource按类型注入-程序员宅基地

文章浏览阅读938次，点赞22次，收藏24次。Autowired注入是由AutowiredAnnotationBeanPostProcessor完成的。@Resource注入是由CommonAnnotationBeanPostProcessor完成的。由于两种方式代码重复率太高，原理基本一致，下面我们主要以AutowiredAnnotationBeanPostProcessor源码分析为主。AutowiredAnnotationBeanPostProcessor负责属性、方法的注入。_spring boot resource按类型注入

Qt5.9.4中利用QOpenGLWidget类进行opengl绘图_qt opgl绘制图片-程序员宅基地

文章浏览阅读3w次，点赞15次，收藏110次。首先打开Qt Creator，然后点击菜单 ,文件->新建文件和项目，如图所示：左边选择Application,右边选择Qt Widgets Application,点击Choose...,项目名称为myOpenGLShow,接着下一步，一直默认，到Details,如下：点击取消选中创建界面（G）。然后下一步，知道完成，程序显示的为mainwindow.cpp文件：接着是利用QOpenGLW..._qt opgl绘制图片

用JAVA重0开始刷数据结构与算法04--二维数组及滚动数组-程序员宅基地

文章浏览阅读66次。二维数组及滚动数组118. 杨辉三角难度简单给定一个非负整数 *numRows，*生成「杨辉三角」的前 numRows 行。在「杨辉三角」中，每个数是它左上方和右上方的数的和。示例 1:输入: numRows = 5输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例 2:输入: numRows = 1输出: [[1]]提示:1 <= numRows <= 30class Solution { //purpos

TCP 之 SYN_SENT状态-程序员宅基地

文章浏览阅读5.1w次，点赞13次，收藏37次。SYN_SENT是TCP连接的发起方第一次发给接受放的时候设置成的状态。可以通过netstat -ano查看其中在"state" 中可能会有 SYN_SENT如果在"state"中出现大量的"SYN_SENT ",那么你很有可能中了蠕虫病毒.这类病毒为了感染别的计算机，它就要扫描别的计算机，在扫描的过程中对每个要扫描的计算机都要发出了同步请求，这也是出现许多SYN_S..._syn_sent

什么叫编译时和运行时-程序员宅基地

文章浏览阅读1.4k次，点赞7次，收藏26次。以前经常听说编译时和运行时的概念.但没太搞明白具体代表啥意思.后面花了点时间研究了下.总算知道个大概意思了.编译时编译时顾名思义就是正在编译的时候.那啥叫编译呢?就是编译器帮你把源代码翻译成机器能识别的代码.(当然只是一般意义上这么说,实际上可能只是翻译成某个中间状态的语言.比如Java只有JVM识别的字节码,C#中只有CLR能识别的MSIL.另外还有啥链接器.汇编器.为了了便于理解我..._.net编译时和运行时