animation动画
介绍:
由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的 属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为 。
Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的 开始、过程、结束状态)。不需要了解任何JavaScript技术即可完成动画的制作。
动画序列
通过@keyframes来设置动画序列,序列中每个关键帧描述动画元素在动画序列的 特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。 0%表示动画的初始时间,也可以通过from关键字表示。100%表示动画的结束时间 ,也可以通过to关键字表示。
简而言之,要想使用动画就要先定义一个动画,通过@keyframes来定义动画从而使其他元素可以使用这个动画。
animations动画的使用
1. 定义关键帧
@keyframes 自定义的名称{
from{
css的属性,可以有多个
}
to{
css的属性,可以多个
}
}
也可以这样
@keyframes user-defined-name{
0%{}
20%{}
30%{}
100%{}
}
2. 调用关键帧
选择器{
animation-name:动画名称user-defined-name;
animation-duration:动画时长3s/200ms;
} 这是两个必须存在的属性,否则没有动画效果。
选择器{
animation-name:user-defined-name;引入的关键帧
animation-duration:3s; 动画的时长
animation-delay:2s;延时....
animation-iteration-count:3 infinite 重复次数.....
animation-timing-function:linner easer b..() steps() 速度曲线
animation-play-state:running paused 正在运行、停止运行:动画状态
animation-direction:normal reverse alternate alternate-reverse
animation:name 3s 2s .. ..
}
接下来学习一下animation的各种属性:
配置动画
animation速写,第一个时间是动画持续时间,第二个是延迟时间
animation-name: 动画名字可以与@keyframes中定义的动画名字绑定
animation-duration: 动画持续时间 动画完成一个循环所需的时间长度。 单位s 、ms ,默认值为0s,所以要想有效果必须设置这个属性。
animation-iteration-count: 动画迭代次数 动画重复的次数。默认值为1,不能为负数,可以为小数,比如0.5表示播放一半,infinite 无限循环
animation-delay :动画延迟执行时间 动画延迟,即元素在加载成功后到动画运行前的时间。 单位为s 、ms ,默认值为0s,即动画加载成功后立刻运行。 例如: animation-delay: 3s;
animation-direction:动画方向 动画运行完是否交替方向或者是重置起点。
normal 默认值,正常播放 (方向是from-to)
reverse 播放帧的顺序反转,播放的起点为帧的结束 (to-from)
alternate 播放帧的顺序交替反转,即第一次播放从帧的开始播放到帧的结束,第二次播 放就从帧的结束播放到帧的开始,与此同时,速度曲线也交替反转。反转时 ease-in交替为ease-out (from-to-from-to-from-to...)
alternate-reverse 与alternate类似,不过第一次播放时候需要反转。(to-from-to-from-to-from...)
animation-play-state:暂停/恢复 动画的状态,可以通过JavaScript查询该属性以确定该动画目前是运行还是停止, 或者可以通过JavaScript来设定动画的运行状态。
running 运行状态
paused 暂停状态
animation-fill-mode :填充模式 指定了CSS动画在执行前和执行后如何将样式应用到它的目标上。
none 不改变默认行为,默认值
forwards 在动画结束后,目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值
backwards 在延迟时间内,目标将保留在执行期间所遇到的第一个关键帧所设置的计算值。
both 向前和向后填充模式都被应用。(backwards-to-from-to-fordwards)
animation-timing-function :动画的速度曲线
ease 默认值,先快后慢
linear 线性增长,匀速
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 先慢后快再慢
steps(步数)会分成括号内的步数来移动,不再连续,很好玩,可以制作简单的帧动画。
transition过渡
介绍
CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变 化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从 白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色 将逐渐从白色变为黑色,按照一定的曲线速率变化。这个过程可以自定义。
CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性),何时开始 (设置delay),持续多久 (设置 duration) 以及如何动画 (定义timing function,比如匀速 地或先快后慢)。
语法
div { transition: ; }
transition 是 transition-property, transition-duration,transition- timing-function , transition-delay的速写形式,分别表示过渡属性,持续时间,时间曲线,过渡延迟
搭配hover使用,
div:nth-child(4){
transition: background-color 2s;
}
div:nth-child(4):hover{
background-color: red;
}
也可以这样,会使:hover使改变全部属性。
div:nth-child(4){
transition: all 2s;
}
div:nth-child(4):hover{
background-color: red;
border: seagreen solid 3px;
width: 50px;
}
总结
animation与transition 的异同:
1.anmination需要先定义再使用,transition直接使用,需要搭配hover才能看到效果。
2.animation可以对多个CSS属性值进行动画,transition只有一个或者all。
3.animation 页面一加载就会生效,transition加载时没有效果
4.都可以搭配hover使用
transform变形
语法
div {
transform: xxx();
transform-origin:center;
}
transform 用来指定一个变形函数对元素执行变形操作
transform-origin 用于指定一个元素变形的原点
如果指定一个值 left / center / right / top / bottom
如果指定两个值 其中一个必须是length,percentage,或left, center, right关键字中的一个。另一个必须是 length,percentage,或top, center, bottom关键字中的一个。
如果指定三个值 前两个值和只有两个值时的用法相同,第三个值必须是length。它始终代表Z轴偏移量
旋转( rotate )
定义了角度若为正则顺时针旋转,为负逆时针旋转
rotateX (angle) 绕X轴旋转
rotateY ( angle ) 绕Y轴旋转
rotateZ ( angle ) 绕Z轴旋转
rotate ( angle ) 与rotateZ()一致。
倾斜(skew)
表现出来的效果就是斜切
skew(ax,ay) 函数表示对元素的剪切或者扭转,ax表示水平方向的扭转,ay表示垂 直方向的扭转,也可以使用skewX(ax) 和skewY(ay)
缩放(scale)
scale(x,y) 函数能够更改元素的大小,scale变换的是通过矢量来实现,它的坐标定义了每个方向上的缩放比例。如果两个向量的坐标是相等的,缩放是均匀的.
scale(2,0.4)
scaleX(2)
scaleY(0.4)
移动(translate)
translate(tx, ty) 函数能够移动元素。tx为元素在水平方向上移动的距离,ty为元素 在垂直方向上移动的距离。
translate(100px,200px)
translateX(100px)
translateY(200px)
@media媒体查询
介绍
CSS的媒体查询模块允许在不改变代码的前提下对显示效果进行调整,媒体查询由 两部分组成,一个可选的媒体类型,以及若干个css表达式。当媒体类型判断结果为 true的时候,其中的css表达式被解析。如果媒体查询应用在link中,即使判断结果为 false,样式表同样会被下载,但是不会应用。用媒体查询来实现响应式布局。
@media screen and (max-width: 768px) 超小屏
@media screen and (min-width:768px) and (max-width: 992px) 小屏
@media screen and (min-width:992px) and (max-width: 1200px) 中屏
@media screen and (min-width: 1200px) 大屏
1. 媒体查询外部引入(注意and前后有空格)
<link rel="stylesheet" href="paid.css"
media="only screen and (min-width:768px) and (max-width:1024px)">
<link rel="stylesheet" href="pc.css"
media="only screen and (min-width:1024px)">
<link rel="stylesheet" href="mobile.css"
media="only screen and (max-width:768px)">
2. 媒体查询内部引入(大括号括起来)
@media screen and(max -width:768px){
选择器{
}
}
<style>
body>div{
float:left;
border:10px solid black;
font-size: 18px;
color:#FFF;
}
/*moblie*/
@media screen and (max-width:768px){
div{
width: calc(100% - 20px);
height: 100px;
background-color:rebeccapurple;
}
.guangao{
display: none;
}
}
/*pad*/
@media screen and (min-width:768px) and (max-width:1024px){
div{
width: calc(50% - 20px);
height: 200px;
background-color:antiquewhite;
}
}
/*pc*/
@media screen and (min-width:1024px){
div{
width: calc(25% - 20px);
height: 400px;
background-color: aqua;
}
}
</style>
逻辑运算符
and 把多个媒体组合成一条媒体查询,对成链式的特征进行请求,只有当每个属性都为真时,结果才为真
@media tv and (min-width: 700px) and (orientation: landscape)
orientation: portrait(竖屏,即设备中的页面可见区域高度>=宽度)
orientation: landscape(横屏,即设备中的页面可见区域高度<宽度)
not 用来对一条媒体查询的结果进行取反
@media not screen and (color), print and (color) 等价于
@media (not (screen and (color))), print and (color)
only 仅在媒体查询匹配成功的情况下被用于应用一个样式,这对于防止让选中的样式
在老式浏览器中被应用到
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
, 媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询
时,如果任何一个媒体查询返回真,样式就是有效的。逗号分隔的列表中每个查询都是独
立的,一个查询中的操作符并不影响其它的媒体查询。
@media (min-width: 700px), handheld and (orientation: landscape)