CSS3之动画

1.过渡----transition

让元素样式慢慢进行变化

1.1 过渡的时间------transition-duration

过渡效果完成的时间(s)

1.2 过渡的属性------transition-property

设置哪些样式有过渡(没过渡的直接完成)
all:代表所有样式都有过渡

1.3 过渡的效果------transition-timing-function

设置过渡变化的不同
ease:先慢====>再快=====>再慢
linear:匀速
step(步数):过渡分布数式进行

1.4 过渡的延时-------transition-delay

设置过渡延时多久进行

1.5 过渡的连写

transition: duration property timing-function delay
注:过渡的连写没有顺序要求,但过渡的时间是必写的,且第一个时间永远是过渡的时间

2. 动画@keyframes

2.1 动画的步骤

定义动画
使用动画

2.2 定义动画

结构:@keyframes 动画名 {}
方法:@keyframes 动画名 {
from {
开始状态
}
to {
结束状态
}
}

@keyframes 动画名 {
0% {
开始状态
}
50% {
中间状态
}
100% {
结束状态
}
}

2.3 动画的使用

元素{ animation:动画名 动画时间}

2.4 动画的8大属性

动画名称:animation-name
动画持续时间:animaton-duration
动画的速度效果:animation-timing-function
动画的延时:animation-delay
动画的次数:animation-iteration-count
infinite:无穷
动画的顺序:animation-direction
normal: 正常from====>to(默认)
reverse:反转to=====>from
alternate:交替from====>to====>from
动画的结束状态:animation-fill-mode
默认再from状态
forwards:在to结束状态
动画的执行状态:animation-play-state
默认是执行的
paused:动画暂停(一般与hover连用)

2.5 动画的连写

animation: name duration timing-function delay iteration-count direction fill-mode;
注:name 与duration是必写的,且第一个时间永远是动画执行时间.

3.css3私有前缀

作用:兼容草案阶段的不同浏览器
Safari和谷歌浏览器:-webkit-
ie浏览器:-ms-
火狐浏览器:-moz-
opera:-o-

4.初识移动端

移动端浏览器只需兼容webkit内核即可
移动端屏幕大小不同,需要使用自适应(流式布局,百分比布局)

4.1 视口的概念

作用：解决了移动端访问pc端页面的问题
特点:可以缩放 默认宽度为980px
快捷键生成: meta:vp(使用subline生成的更加完整)