animation动画
animation
实现动画主要由两个部分组成
- 通过类似Flash动画的关键帧来声明一个动画
- 在
animation
属性中调用关键帧声明的动画实现一个更为复杂的动画效果
设置关键帧
@keyframes animationname{
0%{
color:red;
}
50%{
color:red;
}
100%{
color:red;
}
}
关于keyframes浏览器兼容问题
写兼容的时候浏览器前缀放在@keyframes
中间
如: @-webkit-keyframes
,@-moz-keyframes
动画的属性
通常写出一个animation
属性软件会自动生成很多属性
div {
animation: name duration timing-function delay iteration-count direction fill-mode;
/*
name:名称
duration:持续时间
timing-function:函数
delay:延迟多久开始
iteration-count:播放次数(默认是1) infinite无限制
direction: 播放的方向 normal循环向前 alternate播放为偶数此则向前播放
fill-mode: 设置CSS动画在执行之前和之后如何将样式应用于其目标
*/
}
媒体查询
not
: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。only
: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。all
: 所有设备,这个应该经常看到。
@media screen and (max-width: 480px) {
/*当窗口小于400px时,背景颜色变成红色*/
body {
background-color: red;
}
}