CSS动画

今天在写代码时候，遇到了css动画效果如何实现的问题，经过查阅和实践，总结出一下结论。

transition

transition 指定动画变化的对应属性 以及动画的执行时间。
例如：transition：width 1s;  意思就是当width发生变化时，变化执行1s。
这种可以实现简单的动画效果，但对于复杂的动画，还不能够满足。
 在此基础上，我还新发现一个对于css动画更高级的属性--animation。
animation是结合@keyframes （关键帧）进行使用的。
用法：
 1 .graduallymove{

 2             background-image: url(../../img/1.jpg);//设置背景

 3             background-size:cover;//设置背景图片的样式 铺满整个div

 4             position: relative;//设置div的位置属性为相对定位

 5             top: 100px;//设置距离上边100px

 6             left: 800px;

 7             width: 500px;//设置div宽度为500px

 8             height: 400px;

 9             transition: 1s;//设置div动画效果执行1s

10             box-shadow: 0 0 30px rgba(0, 0, 0, .5);//阴影效果 范范围30px 黑色半透明 四周

11             animation: graduallymove 1.5s ease-out 0.2s ;//设置对象为 garduallymove 1.5s动画 先快后慢 0.2s延迟后再发生

12         }
 1   @keyframes graduallymove {

 2             0%{

 3                 opacity: 0;

 4                 top: 100px;

 5                 left: 0px;

 6

 7             }

 8

 9

10

11             100%{

12                 opacity: 1;

13                 top: 100px;

14                 left: 800px;

15             }

16         }
<body>

    <!-- <div class="leftmove"></div> -->

    <div class="graduallymove"></div>

</body>

效果就是，图片从左向右渐入，最后停在右边。位置为top：100px;left:800px;

对于animation，由于属性复杂，我再单独讲讲。

animation（包含以下几个属性值，可以混合写到一起，最后讲）

animation-name （动画对象）

animation-name：表示动画的对象。animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。

/* Single animation */单一对象

animation-name: none;

animation-name: test_05;

animation-name: -specific;

animation-name: sliding-vertically;

/* Multiple animations */复杂对象，多个对象

animation-name: test1, animation4;

animation-name: none, -moz-specific, sliding;

/* Global values */全局值

animation-name: initial  //最初的

animation-name: inherit//继承的

animation-name: unset//不设置的

animation-duration （动画时长）

animation-duration属性指定一个动画周期的时长。

默认值为0，表示无动画效果。

注意：负值无效，浏览器会忽略该声明，但是一些早期的带前缀的声明会将负值当作0s。

animation-timing-function （动画方式）

定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。

值 描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速)
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

animation-delay （动画延迟）

animation-delay CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

animation-iteration-count （动画次数）

animation-iteration-count 定义动画在结束前运行的次数 可以是1次 无限循环.

如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。

可选值：

infinite

无限循环播放动画.

<number>动画播放的次数；默认值为1。

可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。

animation-direction （动画方向）

animation-direction CSS 属性指示动画是否反向播放

可选值

normal

每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate
动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为 ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse
反向运行动画，每周期结束动画由尾到头运行。(动画反向进行)
alternate-reverse
反向交替， 反向开始交替
动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

animation-fill-mode （动画保持）设置动画最后的样式为哪样

animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标。

值

none

不设置任何样式

forwards

最后一个关键帧的样式（简单点说就是）最后动画的样式

backwards

将在应用于目标时立即应用第一个关键帧中定义的值， （最初的动画样式）

both

两个方向延展动画样式（个人觉得像forwards)

animation-play-state

animation-play-state 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

可选值

running

当前动画正在运行。

paused

当前动画已被停止。

可都将属性写到一起

animation：duration(动画时长) | timing-function（动画类型） | delay（动画延迟） |iteration-count （动画次数）| direction （动画方向）| fill-mode（动画保持） | play-state（动画状态） | name（动画对象） ;

CSS动画--让div动起来的更多相关文章

  1. CSS过渡、CSS动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...

  2. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  3. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

  4. 【转载】css3动画简介以及动画库animate.css的使用

    原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...

  5. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  6. Jquery 动态交换两个div位置并添加Css动画效果

    前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置,常见的思路大多是不考虑原始位置,直接采用append或者appendTo方式将两元素进行添加,该法未考虑原始位置,仅会添加为元素的最后一子 ...

  7. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  8. 从零开始学习jQuery (七) jQuery动画-让页面动起来!

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你 ...

  9. Animate.css让添加CSS动画像喝水一样容易

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

随机推荐

  1. 使用.NET（C#或VB.NET）开发NX外部程序

    1.如何不用将exe程序拷贝到UGII目录下运行? 答:在调用NX Open命令函数前,将当前目录移动到NX安装目录\UGII\,NX安装目录必须和环境变量UGII_BASE_DIR的值一致,否则报错 ...

  2. K12教培从业者转型指南 换个赛道依然可以再创辉煌

    随着"双减"政策的落地,属于K12教培机构的时代逐渐拉上帷幕,面对机会不再的K12教培行业,约70万机构和近千万的从业人员面临转型问题.压力之下,留下或离开?对广大K12教培机构从 ...

  3. java---String 和 StringBuffer

    Java-String和StringBuffer类 Java String 类 字符串在Java中属于对象,Java提供String类来创建和操作字符串. 创建字符串 创建字符串常用的方法如下: ​ ...

  4. 保护模式篇——PAE分页

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...

  5. T-SQL——关于XML类型

    目录 0. 将结果集转化为XML格式 1. 列值拼接为字符串 2. 字符串转换为列值 3. 一些说明 参考 志铭-2021年10月23日 10:43:21 0. 将结果集转化为XML格式 测试数据 I ...

  6. 《手把手教你》系列技巧篇（三十四）-java+ selenium自动化测试-单选和多选按钮操作-中篇（详解教程）

    1.简介 今天这一篇宏哥主要是讲解一下,如何使用list容器来遍历单选按钮.大致两部分内容:一部分是宏哥在本地弄的一个小demo,另一部分,宏哥是利用JQueryUI网站里的单选按钮进行实战. 2.d ...

  7. Beta发布声明

    项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任健) 这个作业的要求在哪里 Beta-发布声明 我们是谁 删库跑路对不队 我们在做什么 题士 进度如何 进度总览 一.功能与特性 1.一 ...

  8. [no code][scrum meeting] Alpha 3

    项目 内容 会议时间 2020-04-07 会议主题 技术规格说明书review 会议时长 1h30min 参会人员 产品经理+后端技术组长(伦泽标)+OCR竞品调研成员(叶开辉)+架构文档负责(黎正 ...

  9. Spring Security Resource Server的使用

    Spring Security Resource Server的使用 一.背景 二.需求 三.分析 四.资源服务器认证流程 五.实现资源服务器 1.引入jar包 2.资源服务器配置 3.资源 六.测试 ...

  10. 并发编程从零开始（九）-ConcurrentSkipListMap&Set

    并发编程从零开始(九)-ConcurrentSkipListMap&Set CAS知识点补充: 我们都知道在使用 CAS 也就是使用 compareAndSet(current,next)方法 ...