CSS3新增内容CSS3新增的一些属性和方法，如calc()、media query、@import、动画等。。。。

calc()

calculate计算的缩写

支持css中的所有单位(时间，长度，角度，频率，数值，%,px,pt,cm,mm.in,vh,vw,rem,em...)
符号(+-*/)左右要有空格calc(100% - 100px);

媒体(media)查询

媒体查询，media query，查询用户所使用的媒体或媒介。PC、平板、手机、电视等。

Media Type

css2中：all(全部)、screen(屏幕)、print(页面打印或打印预览)。 css3：Speech()、Tv、Tty、Projection、Handheld、Embossed、Braille

引用方式

link

<link rel="stylesheet" href='index.css' media='screen'/>
<link rel="stylesheet" href='index.css' media='print'/>

<? xml-stylesheet rel='stylesheet' @medai='screen' href='index.css'?>

@import-不推荐

@import url('index.css') screen;

@media

// 可以连接多个and
@media screen and (max-width:768px){
    //样式
}
// not关键字
@media not print and (max-width:768px){
    //样式
}

还可以通过其他属性判断： width、height、 device-width、device-height、color、color-index、monochrome、aspect-ratio...自己查吧，没必要记太多，浪费脑容量...

过渡和动画

经典真题

css3中的transition和animation的属性有哪些？
css3动画如何实现

CSS3过渡

使得样式从一个值变到另一个值时，这个过程更加平滑。

transition: all/none/property 3s 1s;
transition-property:指定过度的css属性
transition-duration：动画完成需要的时间
transition-timing-function：指定过渡函数
transition-delay：指定过渡的延迟时间

不是所有属性都能过渡，跟值有关的才可以. color、width、height、opacity、font-size、left、top、z-index、visibility、vertical-align等。

时间单位：s/ms。

过渡方式：linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n),0<n<1。

延迟：s/ms,正负整数和0。

CSS3动画

animation和@keyframes结合使用

.box3 {
    background-color: paleturquoise;
    position: relative;
    animation: test 3s;
}
@keyframes test {
0% {
    left: 0;
    top: 0;
}

25% {
    left: 400px;
    top: 0;
}

50% {
    left: 400px;
    top: 200px;
}

75% {
    left: 200px;
    top: 100px;
}

100% {
    left: 0;
    top: 0;
}
}

声明动画@keyframes

@keyframes 动画名{...}，{}里定义关键帧和对应的样式。

使用动画

animation: 动画名事件：

属性：

animation-name:动画名。
animation-duration:动画执行完成需要的时间。
animation-timing-function:动画怎样执行liner、ease...。
animation-delay：延迟执行的时间，s/ms。
animation-iteration-count：动画播放次数。次数/无限次(infinite)
animation-direction：动画是否轮流反向播放。normal/reverse//initial/inherit/alternate(奇数次-正向，偶数次-反向)/alternate-reverse。
animation-fill-mode：当动画不播放时，要应用的样式。none/forwards/backforwards/both/initial/inherit。
animation-play-state：动画的状态，pause/running。

动画对应的事件

animationstart
animationend
animationiteration