css动画和媒体查询

466 阅读1分钟

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; 
    } 
}