css3的过渡和动画的属性介绍

Posted 2022-12-18 sna-ling

一、过渡

什么是过渡？

       过渡是指：某元素的css属性值在一段时间内，平滑过渡到另外一个值，过渡主要观察的是过程和结果。

设置能够过渡的属性：

         支持过渡的样式属性，颜色的属性，取值为数值，transform，渐变，visibility， 阴影

指定本次过渡生效的属性：

transition-poperty:上面的css属性/all

指定过渡的时长

transition-duration:过渡时长/s/ms

指定过渡时间曲线函数

     transition-timing-function:

          1.ease 默认值，慢-->快-->慢  慢速开始，快速变快，慢速结束

          2.linear 匀速

          3.ease-in 慢--->快  慢速开始,快速结束

          4.ease-out 快速开始，慢速结束

          5.ease-in-out 慢速开始，先加速再减速，慢速结束

指定延迟执行过渡的时间

    transition-delay:   s/ms

过渡属性的编写位置

    1.将过渡放在元素声明的样式中（元素自己的样式里）过渡效果有去有回。

    2.将过渡放在元素的触发操作中(hover),过渡效果有去无回。

过渡的简写：

     transition:property duration timing-function delay;

最少的方式：transition:duration;

 

二、动画

什么是动画？

        使元素从一种样式，改变到另外一种，再改变到其他样式......

       相当于将很多个过渡效果放到一起使用。

关键帧：

     1.动画的执行时间点

     2.该时间点上的样式

动画的实现步骤：

    1.声明动画及动画关键帧

      @keyframes  动画名称

           //定义关键帧

           0% 动画开始的样式

            ........

           100%动画结束时的样式

       

    2.调用动画

        animation-name:动画名称；

        animation-duration:动画播放一个周期的时间；

    3.动画的其他属性

        animation-delay

    4.动画的速度时间曲线函数

        animation-timing-function

        ease/linear/ease-in/ease-out/ease-in-out

    5.animation-iteration-count

         指定动画的播放次数

          取值，具体的数字/infinite无限次

    6.animation-direction:

          动画的播放方向

          取值  normal       正常            0%-100% 

                    reverse     逆向播放    100%-0%

                       alternate   轮流播放

                                          奇数次正向播放

                                          偶数次逆向播放

    7.简写方式：

          animation:name duration timing-function delay iteration-count direction;

    8.animation-fill-mode

          指定动画播放前后的显示状态

               1.none  默认值

               2.forwards 动画完成后，保持在最后一个关键帧上

               3.backwards(需要有delay)动画开始之前，保持在第一个关键帧上

               4.both,同时设置forwards和backwards

动画的兼容性：

               如果要兼容低版本的浏览器，需要在声明动画的时候加前缀

               @keyframes 动画名称

               @-webkit-keyframes

               @-moz-keyframes

               @-o-keyframes

三.CSS优化

目的：减少服务器压力，提升用户体验。

1.优化原则

尽量减少HTTP请求的个数。

页面顶部引入css样式

将css和js放到外部独立的文件夹中

2.CSS代码优化

缩小样式文件

减少样式的重写

避免出现空的src和href

选择更优的样式属性值(能使用复合，简写的写法,就不要单独定义)

代码压缩