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

Posted sna-ling

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3的过渡和动画的属性介绍相关的知识,希望对你有一定的参考价值。

一、过渡

什么是过渡?

       过渡是指:某元素的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

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

代码压缩

       

以上是关于css3的过渡和动画的属性介绍的主要内容,如果未能解决你的问题,请参考以下文章

如何触发css3过渡动画

CSS3动画使用技巧与总结

css3中的过渡效果和动画效果

css3 过渡和动画

前端学习(18)~css3属性学习:动画详解

CSS3——过渡与动画(实现炫酷下拉)