CSS动画、媒体类型、过渡

目录

动画

媒体类型

过渡

---

动画

@keyframes规则是创建动画
animation:所有动画属性的简写属性，除了animation-play-state属性
animation-name：规定@keyframes动画名称
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认为0
animation-timing-function：规定动画的速度曲线。默认是ease
animation-fill-mode：规定当动画不播放时(或当动画有一个延迟未开始播放时)，要应用到元素的样式
animation-delay：规定动画何时开始。默认是0
animation-iteration-count：规定动画被播放的次数。默认是1
animation-direction：规定动画是否在下一周期逆向播放。默认是normal
animation-play-state：规定动画是否正在运行或暂停。默认是running

媒体类型

@media查询
    定义：使用@media查询，可以针对不同媒体类型定义不同的样式
    @media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置响应式页面
    作用：解决不同页面分辨率问题
    CSS语法：@media mediatype and|not|only (media feature){
        CSS-Code;
    }
    也可以针对不同的媒体使用不同stylesheets:
        <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
        @media +（ not  | only） + 媒体类型 + and （媒体查询）
        not：该关键字是用来排除某种制定的媒体类型
        only：用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

        媒体类型：
        1.all：用于所有的媒体设备
        2.aural：用于语音和音频合成器(已废弃)
        3.braille：用于盲人用点字法触觉回馈设备(已废弃)
        4.embossed：用于分页的盲人用点子法打印机(已废弃)
        5.handheld：用于小的手持的设备(已废弃)
        6.print：用于打印机
        7.projection：用于方案展示，比如幻灯片(已废弃)
        8.screen：用于电脑显示器
        9.tty：用于使用固定密度字母栅格的媒体，比如电传打字机和终端(已废弃)
        10.tv：用于电视类型的设备(已废弃)
    媒体功能：
        1.aspect-ratio：定义输出设备中的页面可见区域宽度与高度的比率
        2.color：定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
        3.color-index：定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询，则值等于0
        4.device-aspect-ratio：定义输出设备的屏幕可见宽度与高度的比率
        5.device-height：定义输出设备的屏幕可见高度
        6.grid：用来查询输出设备是否使用栅格或点阵
        7.height：定义输出设备中的页面可见区域高度
        8.max-aspect-ratio：定义输出设备的屏幕可见宽度与高度的最大比率
        9.max-color：定义输出设备每一组彩色原件的最大个数
        10.max-color-index：定义输出设备的彩色查询表中的最大条目数
        11.max-device-aspect-ratio：定义输出设备的屏幕可见宽度与高度的最大比率
        12.max-device-height：定义输出设备的屏幕可见的最大高度
        13.max-device-width：定义输出设备的屏幕最大可见宽度
        14.max-height：定义输出设备中页面最大可见区域高度
        15.max-monochrome：定义一个单色框架缓冲区中每像素包含的最大单色原件割舍
        16.max-resolution：定义设备的最大分辨率
        17.max-width：定义设备中页面最大可见区域宽度
        18.min-aspect-ratio     定义输出设备中的页面可见区域宽度与高度的最小比率。
        19.min-color    定义输出设备每一组彩色原件的最小个数。
        20.min-color-index  定义在输出设备的彩色查询表中的最小条目数。
        21.min-device-aspect-ratio  定义输出设备的屏幕可见宽度与高度的最小比率。
        22.min-device-width     定义输出设备的屏幕最小可见宽度。
        23.min-device-height    定义输出设备的屏幕的最小可见高度。
        24.min-height   定义输出设备中的页面最小可见区域高度。
        25.min-monochrome   定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
        26.min-resolution   定义设备的最小分辨率。
        27.min-width    定义输出设备中的页

过渡

过渡属性：
    transition:简写属性，用于在一个属性中设置四个过渡属性
        transition:property duration timing-funtion delay
    transition-property:规定应用过渡的CSS属性的名称
        transition-property:none|all| property;
            none:没有属性会获得过渡效果
            all：所有属性都将获得过渡效果
            property：定义应用过渡效果的CSS属性名称列表，列表以逗号分隔
                eg:transition-property:width
                    width:100px;
                    div:hover{width:300px}
    transition-duration:定于过渡效果花费的时间。默认是0
        transition-duration:time
            time:规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认是0，意味着不会有效果
                eg:transition-duration:5s;
    transition-timing-function:规定过渡效果的时间曲线。默认是ease
        transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
            linear:规定以相同速度开始至结束的过渡效果
            ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
            ease-in：规定慢速开始的过渡效果
            ease-out：规定以慢速结束的过渡效果
            ease-in-out：规定以慢速开始和结束的过渡效果
            cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值
                eg:transition-timing-function:linear;
    transition-delay：规定过渡效果何时开始。默认是0
        transition-delay:time;
            time:指定秒或毫秒之间要等待切换效果开始
                eg:transition-delay:2s;