CSS3动画：transition和animation（一）

时间 2019-11-17

标签 css3 css 动画 transition animation 栏目 CSS 繁體版

原文原文链接

一、浏览器支持状况css

transform:html

transition:java

animation:浏览器

二、分别介绍他们的用法动画

transform 属性向元素应用 2D 或 3D 转换。该属性容许咱们对元素进行旋转、缩放、移动或倾斜，便可以改变元素的形状。
spa

语法为transform: none|transform-functions;
具体的方法参见

W3CSchool上的CSS3 transform 属性介绍

transition 属性是一个简写属性，用于设置四个过渡属性：ssr

transition-property 　　 //哪个属性的变化须要过分动画
transition-duration //过分动画持续的事件是多少
transition-timing-function //过分动画的效果是什么
transition-delay　　　　　　　　　　//过分动画是否延时触发

W3CSchool上的CSS3 transition 属性介绍

这里简单说下实际上使用这两个属性作过分动画时候的方法：3d

　　例1：咱们最常常用的应该是鼠标滑到元素之上的时候，让元素有一些变化。咱们会设置初始化的时候div的状态，而后设置div:hover相应的状态（状态的改变能够是普通的属性，相似于width，height之类的，但今天说的是transform，因此特指变形），这两个状态之间，咱们想用过分动画的形式，让他们呈现出一种动画的效果。那么怎么使用过分属性transition呢。一开始，我将这个属性给了div:hover，这样设置获得一个很奇怪的效果，那就是鼠标放上去的时候，能够按照设定的transition方法进行过分，可是鼠标移开的时候，倒是直接变回来初始化状态，中间并没有过分。为何会这样呢。先分析下选择器，div和div:hover同时选择的是div元素，只不过div:hover只是选择了div中的一种状态而已。那么，div:hover中的transform属性在鼠标滑到div元素之上的时候会被加到div元素中，这时候div元素状态的改变，就会以transition中的设置进行了。而当鼠标移出div元素的时候，除了会讲状态设置到初始化时候的状态，也会移除transition中设置的效果，从而致使移出动画并无过分效果。code

例2：一样的，若是是用javaScript经过事件绑定，在鼠标滑到元素之上的时候加上一个改变状态的class,也是必需要在元素的初始化状态下设置transition的方法。才会在无论是在改变状态以前仍是以后都有过分的效果。orm

经过上面的例子不难看出，元素状态的改变，好比说width,height,transform...其实就是过分动画的第一帧和最后一帧。而经过对元素设置transition属性，也就是设置了首尾两帧之间的过分。

附上最基础的动画代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{position: relative;}
        .donghua{transition: all .3s linear;width: 200px;background-color: #555;color: #fff;height: 100px;position: absolute;top: 88px;left: 123px;}
        .donghua:hover{width: 300px;transform: scale(1.2,1.3);}
    </style>
</head>
<body>
    <div class="donghua">CSS3动画演示</div>
</body>
</html>

鼠标移进和移出div都会看到带过渡效果的动画。

【本文··完】