学习css3中的动画
- keyframes : 定义了什么阶段展示什么样的动画
- animation 属性 :把动画挂载到一个具体的dom上,并且定义如何动起来;
keyframes
- 动画的名字, 比如说, @ keyframes bounceIn
- 动画的各个阶段,0% 是最开始的阶段, 100%是最终的阶段,中间可以添加多个中间状态
- css的属性,在动画的各个阶段,css的属性分别是什么样的
@keyframes bounceIn {
0%{
transform: scale(0.1);
opacity:0;
}
60%{
transform:scale(1.2);
opacity:1
}
100%{
transform: scale(1);
opacity:1
}
}
animation 属性
- 把动画添加到了你想添加的那个元素
- 定义动画是如何动起来的
div {
animation-duration:2s;
animation-name: bounceIn;
}
div {
animation: bouncIn 2s;
}
animation:[animation-name][animation-duration][animation-timing-function]
[animation-delay][animation-iteration-count][animation-direction]
[animation-fill-mode][animation-play-state];
animation-timing-function
animation-delay
animation-interaction-count
Animation-direction
animation-fill-mode
animation-play-state
.div {
animation: slideIn 2s, rotate 1.75s;
}
- -webkit-transform : translate ( 10px , 20px ) // 常用在绝对定位的水平居中,垂直居中;
- -webkit-transform : rotate( 12deg )
- -webkit-transform : scale ( 1,3 ) 宽度放大1倍,高度放大3倍
- -webkit-transform : skew(30deg,60deg) 沿x轴旋转的角度,沿y轴旋转的角度
- transform-origin : 变换的基点
学习css3中的动画的更多相关文章
- CSS3中的动画功能(一)
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...
- css3中的动画功能
直接用我的一段代码演示下css3中实现动画效果的事例,让一个div自动旋转起来 代码如下: <!doctype html> <html lang="en"> ...
- CSS3中的动画
CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...
- CSS3中的动画效果-------Day72
还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- css3中的动画效果
css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...
- CSS3中的动画功能(二)
上一篇文章讲解了css3动画中的一个即transitions,那么今天来说说另外一个animations.和transitions不同的是animations可以定义多个关键帧以及每个关键帧中元素的属 ...
- css3中的动画 @keyframes animation
动画的运用比较重要.接下来我希望针对我自己学习遇到的问题,再总结一下这个属性的使用方法. 创建一个动画: @keyframes 动画名 {样式} 引用自己创建的动画: animation:动画名 时 ...
- 第100天:CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...
随机推荐
- ios deprecated 警告消除 强迫症的选择
#pragma clang diagnostic push #pragma clang diagnostic ignored "-Wdeprecated-declarations" ...
- windows升级到1607后操作很卡顿的解决办法
CPU I5,固态128G,win7主系统,WIN10和WIN7都安装在固态硬盘上. 未升级之前,操作很流畅,以至于把家里的老古董电脑也换固态,系统换WIN10了.自从升级了1607后这个问题就出现了 ...
- php基础知识(二)---2017-04-14
1.字符串的三种表达形式: (1)双引号 (2)单引号 (3)尖括号 $s = <<<A <div style="width:500px; height:100px; ...
- 快速排序算法回顾 --冒泡排序Bubble Sort和快速排序Quick Sort(Python实现)
冒泡排序的过程是首先将第一个记录的关键字和第二个记录的关键字进行比较,若为逆序,则将两个记录交换,然后比较第二个记录和第三个记录的关键字.以此类推,直至第n-1个记录和第n个记录的关键字进行过比较为止 ...
- CGLIB和JDK代理
需要的架包:在spring中提供对CGLIB的支持 一.JDK的动态代理 1.接口IUserDao package cn.itcast.spring3.jdk.proxy; public interf ...
- Load 数据1
Druid 的load 数据分为两类 :批量load(历史数据) 和实时load(新数据) ,本文介绍批量load 数据 indexing 服务 批量load 数据需要用到indexing 服务,它是 ...
- zlog学习随笔
zlog1使用手册 Contents Chapter 1 zlog是什么? 1.1 兼容性说明 1.2 zlog 1.2 发布说明 Chapter 2 zlog不是什么? Chapter 3 ...
- 使用vue-cli构建多页面应用+vux(二)
当我们安装好vue-cli完整的项目以后,我们开始对它进行改造,此处参考了简书某个作者的,附上原文链接 http://www.jianshu.com/p/43697bdee974以及此文例子地址htt ...
- bzoj2876 [Noi2012]骑行川藏
Description 蛋蛋非常热衷于挑战自我,今年暑假他准备沿川藏线骑着自行车从成都前往拉萨.川藏线的沿途有着非常美丽的风景,但在这一路上也有着很多的艰难险阻,路况变化多端,而蛋蛋的体力十分有限,因 ...
- [ext4]06 磁盘布局 - 特殊inode
Ext4预留了一些inode做特殊特性使用,见下表: inode Purpose 0 不存在,Ext4中不存在inode 0. 1 存放损坏的数据块链表 2 根目录 3 User quota. 用户q ...