过渡模块和动画模块的区别：过渡动画需要人为的去触发这个反应，而动画模块不需要人为
相同点：都是动画；都是系统新增的属性；都是要满足三要素才有动画效果
三要素：1.告诉系统执行哪个动画，要写出动画名称；animation-name:名称;
        2.告诉系统我们需要创建一个名称的动画； @keyframes 名称 {
                                        from{

                                            }
                                        to{

                                           }
                                                           }
        3.告诉系统动画持续时长;            animation-duration:动画持续时间;
其他属性：动画运动的速度：animation-timing-function：（linear-线性...）；
          动画延迟多少秒执行：animation-delay：秒数；
          动画执行次数：animation-iteration-count：次数；
          动画是否轮流反向播放：animation-direction：alternate（轮流反向播放）normal（正常播放，默认取值）；
          控制动画的发生和静止：animation-play-state：running（动画正在播放，默认取值）paused（动画静止）；
 注意点：第二种方式制作动画不用from-to用百分比，好处可以设置任意多的节点
            0%{

            }
            50%{

            }
            100%{

            }
            动画是有一定的状态的：1.等待状态；2.执行状态；3.结束状态；
            animation-fill-mode（动画等待和结束状态的样式）：none（不做任何改变）
                                                            backwards（动画第一帧的状态）
                                                            forwards（动画最后一帧的状态）
                                                            both(动画从第一帧的样式开始最后停留在最后一帧)
 动画模块的连写：animation：动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画；
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画模块</title>

    <style>

        @keyframes  {

        }

        div{

            animation-duration: ;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

CSS动画之动画模块的更多相关文章

  1. CSS学习笔记-动画模块

    动画模块:    1.过渡和动画之间的异同        1.1不同点            (1)过渡必须人为触发才能执行            (2)动画不需要人为触发就可以执行        1 ...

  2. css变换与动画详解

    举个栗子:--------元素整体居中.box{     position:absolute;top:50%;left:50%;    width:50px;    height:50px;    t ...

  3. CSS篇之动画（2）

    animation-name(自定义动画) name为动画名称.不要用中文,尽量用与动画相关的名称.元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义 ...

  4. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  5. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

  6. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  7. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  8. 简单的CSS圆形缩放动画

    简单的CSS圆形缩放动画 话不多说鼠标移动上去,看效果吧,效果预览 代码如下: <!DOCTYPE html> <html> <head> <title> ...

  9. CSS属性组-动画、转换、渐变

    一.动画 animation动画属性是一个简写属性,用于设置六个动画属性 aninmation-name动画名称,被调用 animation-duration完成动画需要的持续时间 animation ...

随机推荐

  1. 理解vue与MVVM三要素

    MVVM到底是什么,跟Jquery有什么区别? MVVM理解,跟MVC区别 Model View Controller,一般是用户操作view视图按钮,触发controller内方法,cotrolle ...

  2. .NET 是信息技术应用创新产业重要参与者

    今天是国庆节,也是中秋节,月满中秋,举国欢庆,在这里祝各位开发者中秋国庆快乐. 放假在家就想把这几年对于.NET发展相关生态做个梳理,写一篇文章来总结一下这两年从腾讯出来自己创业,推动.NET在国内的 ...

  3. 普利姆算法（prim）

    普利姆算法(prim)求最小生成树(MST)过程详解 (原网址) 1 2 3 4 5 6 7 分步阅读 生活中最小生成树的应用十分广泛,比如:要连通n个城市需要n-1条边线路,那么怎么样建设才能使工程 ...

  4. Webstorm破解版安装教程

    Webstorm破解版: 安装包链接见:https://pan.baidu.com/s/1XJqRtM9C4M8AmH50S9dVDQ 提取码: dah3 内附安装教程, 原创文章,转载请先联系作者

  5. P 4315 月下毛景树

    题目描述 毛毛虫经过及时的变形,最终逃过的一劫,离开了菜妈的菜园. 毛毛虫经过千山万水,历尽千辛万苦,最后来到了小小的绍兴一中的校园里. 爬啊爬~爬啊爬毛毛虫爬到了一颗小小的"毛景树&quo ...

  6. Tensorflow学习笔记No.6

    数据的批标准化 本篇主要讲述什么是标准化,为什么要标准化,以及如何进行标准化(添加BN层). 1.什么是标准化 传统机器学习中标准化也叫做归一化. 一般是将数据映射到指定的范围,用于去除不同维度数据的 ...

  7. 极客 Play 玩 Terminal——GitHub 热点速览 Vol.40

    作者:HelloGitHub-小鱼干 多少人以为暗黑的终端便是一名程序员的工作台,其实上,终端可以不只是一个输入 command 的界面,也可以是本周特推 kb 一样,面向极客的极简命令行知识库管理器 ...

  8. Linux 下 svn 场景实例及常用命令详解

    一.SVN使用场景实例 问题: 在使用svn做为版本控制系统的软件开发中,经常会有这样的需求:在工作复本目录树的不同目录中增加了很多文件,但未纳入版本控制系统,这时如果使用svn add命令一个一个的 ...

  9. mPDF的简单使用

    1. 基本使用 安装 1  在项目下composer文件中 添加 "mpdf/mpdf":"~7.1.9" 测试环境为Yii项目 其他框架composer安装大 ...

  10. 使用appium后安卓手机无法调出键盘解决方法

    问题:用appium进行真机调试后,使用手机的app进行输入时无法调出键盘. 原因:appium调试时,将手机输入法设置成了Unicode IME 解决方法: 方法一,手机设置里修改输入法: 不同的手 ...