CSS动画--让div动起来
CSS动画
今天在写代码时候，遇到了css动画效果如何实现的问题，经过查阅和实践，总结出一下结论。
transition
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动起来的更多相关文章
- CSS过渡、CSS动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 转: css3动画简介以及动画库animate.css的使用
~~~ transition animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...
- 【转载】css3动画简介以及动画库animate.css的使用
原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...
- 纯CSS制作加<div>制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
- Jquery 动态交换两个div位置并添加Css动画效果
前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置,常见的思路大多是不考虑原始位置,直接采用append或者appendTo方式将两元素进行添加,该法未考虑原始位置,仅会添加为元素的最后一子 ...
- CSS动画与GPU
写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你 ...
- Animate.css让添加CSS动画像喝水一样容易
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
随机推荐
- Web前端安全之安全编码原则
随着Web和移动应用等的快速发展,越来越多的Web安全问题逐渐显示出来.一个网站或一个移动应用,如果没有做好相关的安全防范工作,不仅会造成用户信息.服务器或数据库信息的泄露,更可能会造成用户财产的损失 ...
- 【c++ Prime 学习笔记】第13章 拷贝控制
定义一个类时,可显式或隐式的指定在此类型对象上拷贝.移动.赋值.销毁时做什么.通过5种成员函数实现拷贝控制操作: 拷贝构造函数:用同类型的另一个对象初始化本对象时做什么(拷贝初始化) 拷贝赋值算符:将 ...
- 240.搜索二维矩阵II
从左下角位置开始搜索 时间复杂度:O(行数+列数). 想法有点像二分法,大了往一个方向找,小了往另一个方向找.由于矩阵横向和纵向都是递增,如果从(0,0)位置开始找,往右和往下都是增大,因此不知道实际 ...
- UML快速概述 - All you need to know about UML
UML 是统一建模语言的缩写,就像使用一组图表来可视化软件建模的蓝图(或设计计划).它不仅可以让您彻底评估整个概念,还可以确保团队中的每个人都在同一页面上. UML 图可以组织成两个不同的组. 结 ...
- BUAA-软件工程第一次作业
软件工程第一次作业 项目 内容 这个作业属于哪个课程 2020春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里 第1次个人作业 我在这个课程的目标 团队完成好的软件,并对自己作出规划 这个作 ...
- eureka服务端和客户端的简单搭建
本篇博客简单记录一下,eureka 服务端和 客户端的简单搭建. 目标: 1.完成单机 eureka server 和 eureka client 的搭建. 2.完成eureka server 的添加 ...
- [BZOJ3307] 雨天的尾巴-----------------线段树进阶
虽然是个板子,但用到了差分思想. Description N个点,形成一个树状结构.有M次发放,每次选择两个点x,y对于x到y的路径上(含x,y)每个点发一袋Z类型的物品.完成所有发放后,每个点存放最 ...
- C语言基础知识总结大全
1.入门程序 #include <stdio.h> int main() { printf("Hello World!"); return 0; } 2.数据类型 数据 ...
- 单片机stm32F103单片机晶振不起振的原因分析
这是我在做单片机最小系统板时候碰到的问题,之前虽然也做过相似的板子,可是未曾出现过无源晶振不起振的问题.下面是我在遇到问题后的一些检查,排除问题的过程.本人小菜鸟一个,文章中如有错误和不足,还望各位大 ...
- 攻防世界 杂项 2.embarrass
解1: linux环境下直接strings misc_02.pcapng | grep flag可得flag. 解2: 使用wireshark搜索flag. 解3: winhex搜索flag.