css010 css的transform transition和animation
css010 css的transform transition和animation
看着没有一个能想起他们是干什么的。。
1、 Transform
Transform(变形)
rotate(旋转)
transform:rotate(10deg); 顺时针旋转10度 (deg角度的度量单位)
scale(缩放)
transform: scale (2); scale(缩放)调整元素的尺寸 (2代表倍数)
transform: scale (2,5); 宽变为两倍 高变为5倍
transform: scalex (2); 宽度变为2倍 高度不变
scale是缩放元素,当它后面的值为负数时可以让一个元素翻转
transform: scalex (-1); 从左往右翻。
transform: scalex (-1,1); 沿Y轴翻转。
transform: scalex (1,-1); 沿X轴翻转。
translate( 元素实现向某一个方向移动)
translate:x y; (x值为负值时-向左移动。Y为负值时-向上移动)
skew(倾斜)
transform:skew(45deg 0); 沿X轴倾斜
transform:skew(0 45deg); 沿Y轴倾斜
多个transform函数共用
transform:rotate(45deg) scale(2);
origin (根源,起点) 一般默认为元素中心点
transform-origin:left top;
2、 transition (过渡 变化 转化)
一、为了使transition生效,需要做以下事情:
1、两个样式:一个样式代表元素最初的样子,另一个样式代表最终的样子
2、Transition属性:
3、触发器
二、如何添加transition
Css的transition的核心是用四个属性控制要移动化战士哪些属性、动画过程要多久,使用什么类型的动画,以及动画开始前要不要延迟。
transition需要添加供应商前缀才能正常在浏览器中使用。(p389 p390)
以下例子是让鼠标经过时背景色变为蓝色,并且变化持续一秒。
1、.navButton{
background-color :orange;
transition-property:background-color;
transition-duration:1s;
}
.navButton:hover{
background-color:blue
}
三、四个属性分别是什么??
1、transition-property ,定义了要以动画形式战士哪些属性
关键字:all、(color、background-color、boder-color)
2、transition-duration 定义了动画要持续多久才结束(一般以秒或者毫秒为单位)
transition-duration:1s;
还可以对每一个要定义动画的属性就行时间限定:
transition-property:color, background-color, boder-color;
transition-duration:1s, .75s ,2s;
3、transition-timing-function 控制动画的速度:可为下面四个值:
linera 、ease(默认) 、ease-in、 ease-out、ease-in-out
transition-timing-function: cubic-bezier(.20, .96, .74, .07)
4、transition-delay 延迟启动transition
transition:2s;
四、transition的快捷方式
transition属性可以一次性把transition-property transition-duration transition-timing-function transition-delay都表达出来。称为他的快捷属性
transition: all 1s ease-in 5s;
transition: background-color 1s ;等等
3、 Animation (创建动画)
一、 创建动画的两个步骤:
1、定义动画(包括创建关键帧)
2、将动画运用到元素上
二、 如何定义关键帧
定义关键帧的基本结构:
@keyframes animationName{
from{/* list css properties here*/}
to{/* list css properties here*/}
}
from 开始帧。to 结束帧
@keyframes fadein{
from{opacity:0;}
to{opacity:1;}
}
@keyframes fadein{
from{ background-color:red; }
50%{ background-color:blue; }
to{ background-color:orange;}
}
可以用0%替代from ,100%替代to;
三、 如何应用animation
1、可以给伪类应用动画,包括 :hover :active :target :focus
2、用@keyframes规则创建淡入动画:
@keyframes fadeIn{ from{opacity:0;} to{ opacity:1;} }(为单个属性创建动画)
(为多个属性创建动画)
@keyframes fadeIn{
from{
opacity:0;
color:red;
width:50%;
}
to{
opacity:1;
color:blue;
width:100%;
}
}
3、将动画应用到<div>标签的样式
.announcement{
animation-name:fadeIn;
animation-duration:1s;
}
animation-name 告诉浏览器使用哪一个动画
animation-duration 告诉浏览器动画持续的时间
四、 如何给animation定时
五、 如何完成animation
transition 是只能运行一次的动画
animation 可以运行多次的动画
animation-iteration-count:10; (将动画运行十次)
animation-direction 控制动画运行的方向:值可为:alternate
六、 animation快捷方式
.fade{
animation-name:fadeout;
animation-duration:2s;
animation-timing-function:ease-in-out;
animation-iteration-count:2;
animation-direction:alternate;
animation-delay:5s;
animation-fill-mode:forwards;
}
可以写成下面一句话:
.fade{ animation:fadeout 2s ease-in-out 2 alternate 5s forwards }
(只有名称和时间是必要的,其他的都是可选的。)
七、 如何暂停animation
animation-play-state:running/paused;
.fade:hover{ animation-play-state: paused; }
css010 css的transform transition和animation的更多相关文章
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- CSS3中transform,transition和animation的简单介绍和使用方法演示样例
transform是一个属性,本质跟width,height是一样的,加上transform也就是为类添加一个变换属性. transition是一个属性.它是用来控制过渡效果的,由于用transfor ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- CSS动画transform、transition和animation的区别
CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...
- CSS製作動畫效果(Transition、Animation、Transform)
CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...
- css—动画(transform, transition, animation)
transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有 ...
- css3实践之图片轮播(Transform,Transition和Animation)
楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
随机推荐
- XSS attack
<html> <form action="" method="post"> <input type="text" ...
- Spring学习进阶(二)Spring IoC
在使用Spring所提供的各种丰富而神奇的功能之前,必须在Spring IoC容器中装配好Bean,并建立Bean与Bean之间的关联关系.控制反转(Inverser of Control ioc)是 ...
- hibernate用setResultTransformer转换
当你用hibernate查出数据,但是类型不是原来的类型怎么办,新增的实体类还可以用,query.setResultTransformer(Transformers.aliasToBean(AA.cl ...
- canvas边界与摩擦力
处理物体超出画布时的三种基本状态,复位,移除,反弹 (1)检测是否越界的核心算法 if( object.x - object.width / 2 > right || object.x + ob ...
- Java的反射机制(Reflection)
反射机制 指可以在运动时加载.探知.使用编译期间完全未知的类 程序在运行状态中,可以动态加载一个只有名称的类,对于任意一个已加载的类,都能够获取这个类的属性和方法:对于任意一个对象可以调用它的任意一个 ...
- 【CodeVS 3290】【NOIP 2013】华容道
http://codevs.cn/problem/3290/ 据说2013年的noip非常难,但Purpleslz学长还是AK了.能A掉这道题真心orz. 设状态$(i,j,k)$表示目标棋子在$(i ...
- 解决PHP生成UTF-8编码的CSV文件用Excel打开乱码的问题
在要输出的内容前先输出"\xEF\xBB\xBF", eg:要输出的内容保存在$content里$content = "\xEF\xBB\xBF".$conte ...
- js 中 == 和=== 有什么区别?
第一个是相等符:第二个全等符: 其中第一个在比较的时候,会进行类型转换,而第二个则不会, alert('55' == 55);//truealert('55' === 55);//false
- OPENGGL深度测试
深度测试是为了解决那些在绘图过程中本应该被隐藏的面结果却出现了,例如: 绘图代码中先绘制了一个一个近处的立方体,后绘制了一个远处的立方体,结果在绘制过程中,远处的立方体总是在近处的立方体后绘制,所以在 ...
- Metro-UI系统-2-color和icon
1.上图 Color icon 2. 怎么用 2.1 color使用 <!--1,设置背景和前景色--> <div class="tile bg-blue fg-white ...