CSS3之transition和animation动画

最新推荐文章于 2023-10-16 17:00:25 发布

aiolos1111

最新推荐文章于 2023-10-16 17:00:25 发布

阅读量887

点赞数

分类专栏： css 文章标签： css3 动画 animation transition

本文链接：https://blog.csdn.net/aiolos1111/article/details/52036408

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

   在写完css3之变形后，感觉一下子对transform的使用清晰了很多，所以决定再把css3中其他重要新功能也梳理一下。本文将梳理transition和animation动画功能

本文示例中使用到的html结构都是统一的，代码如下：

<style>
        #wrapper{
            width: 200px;
            height: 200px;
            border: 1px dotted red;
            margin: 100px auto;
            margin:100px auto;
        }
        #rotate{
            width: 200px;
            height: 200px;
            background: orange;
            line-height: 200px;
            text-align: center;
       }
 </style>
<div id="wrapper">
        <div id="rotate">
            动画特效
        </div>
</div>

CSS3中可以实现动画效果的属性有Transition和Animation，这两种功能都可以通过改变CSS中的属性值来产生动画效果。

transition(过渡)

作用：
       通过鼠标单击、获得焦点等事件来平滑地以动画效果改变CSS属性值

语法：transition: property duration timing-function delay
       其中：
       transition-duration: 表示在多长时间内完成属性值的平滑过渡
       transition-timing-function: 表示通过什么方法来进行平滑过渡（具体值后面详细介绍）
       transition-delay: 指定延迟多长时间后开始执行动画
       transition-property: 表示对哪个CSS属性进行平滑动画过渡(可设置为all，则所有属性值变化时均产生动画效果)

拥有过渡效果的CSS属性如下图(即可以作为transition-property的值的属性)：
这里写图片描述

在CSS中创建简单的transition过渡效果可从以下三步来实现：
       第一，在默认样式中声明元素的初始状态样式；
       第二，声明过渡元素最终状态样式，比如悬浮状态；
       第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS代码如下：

#rotate{
            transition:transform 3s ease-in 0s;
        }
#rotate:hover{
            -webkit-transform: rotate(45deg);
        }

页面效果如下：
这里写图片描述

animation(动画)

语法：animations: name duration timing-function delay iteration-count;

其中：

       animation-name: 用来调用在 @keyframes中已经定义好的动画，其名称必须与“@keyframes”定义的动画名称完全一致（区分大小写）；none为其默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

       animation-duration: 用来指定元素播放动画所持续的时间，也就是完成从0%到100%一次动画所需时间
        animation-timing-function: 用来设置动画播放方式（具体值下面详细介绍）

       animation-delay: 用于定义在浏览器开始执行动画之前等待的时间。

       animation-iteration-count: 用来定义动画的播放次数，可设置为具体数值，或者设置为infinite进行无限循环，默认为1

       animation-direction:用来设置动画播放方向,其主要有两个值：normal(默认值,每次循环总是向前移动)、alternate(动画播放在第偶数次向前播放，第奇数次向反方向播放)

       animation-play-state:用来控制元素动画的播放状态,其主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态

       animation-fill-mode:定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。

Keyframes被称为关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

在CSS中创建简单的animation动画效果可以从以下几个步骤来实现：
       第一，在默认样式中声明元素的初始状态样式；
       第二，在需要执行动画的元素样式中添加animation属性；
       第三，在关键帧中声明不同时间段的样式规则

   在写完css3之变形后，感觉一下子对transform的使用清晰了很多，所以决定再把css3中其他重要新功能也梳理一下。本文将梳理transition和animation动画功能

本文示例中使用到的html结构都是统一的，代码如下：

<style>
        #wrapper{
            width: 200px;
            height: 200px;
            border: 1px dotted red;
            margin: 100px auto;
            margin:100px auto;
        }
        #rotate{
            width: 200px;
            height: 200px;
            background: orange;
            line-height: 200px;
            text-align: center;
       }
 </style>
<div id="wrapper">
        <div id="rotate">
            动画特效
        </div>
</div>

CSS3中可以实现动画效果的属性有Transition和Animation，这两种功能都可以通过改变CSS中的属性值来产生动画效果。

transition(过渡)

作用：
       通过鼠标单击、获得焦点等事件来平滑地以动画效果改变CSS属性值

语法：transition: property duration timing-function delay
       其中：
       transition-duration: 表示在多长时间内完成属性值的平滑过渡
       transition-timing-function: 表示通过什么方法来进行平滑过渡（具体值后面详细介绍）
       transition-delay: 指定延迟多长时间后开始执行动画
       transition-property: 表示对哪个CSS属性进行平滑动画过渡(可设置为all，则所有属性值变化时均产生动画效果)

拥有过渡效果的CSS属性如下图(即可以作为transition-property的值的属性)：
这里写图片描述

CSS代码如下：

#rotate{
           animation: wobble 5s ease .1s;
        }
@keyframes wobble {
          0% {
            margin-left: 0px;
            background:green;
          }
          40% {
            margin-left:150px;
            background:orange;
          }
          60% {
            margin-left: 75px;
            background: blue;
          }
          100% {
            margin-left: 100px;
            background: red;
          }
        }

页面效果如下：

这里写图片描述

timing-function

transition和animation中都一个timing-function属性，该属性值指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，

其主要取值是以下几种函数名：
这里写图片描述

aiolos1111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3之transition和animation动画

在写完css3之变形后，感觉一下子对transform的使用清晰了很多，所以决定再把css3中其他重要新功能也梳理一下。本文将梳理transition和animation动画功能本文示例中使用到的html结构都是统一的，代码如下：<style> #wrapper{ width: 200px; height: 200px;
复制链接

扫一扫