Web笔记——动画变形和媒体查询

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)