css3新添加的过渡、动画和变换

灰太狼 2022-07-13 06:38 175阅读 0赞

# css3新添加的过渡、动画和变换 #

在这几周的时间，我看完了css部分的相关知识，在这个过程中唯一的感觉就是css并没有我想象的那么简单，它有着很复杂的一面。这几周的时间，我看完一本css权威指南和html5权威指南的css部分，也算是系统的学习了一下css。  
个人觉得有必要写一下CSS3部分的新特性：过渡、动画和变换。

*  **过渡**  
    过渡效果一般是由浏览器直接改变元素的css属性实现的。例如 ：hover选择器。

![效果][SouthEast]

过渡属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">说明</th> 
   <th align="right">值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>transition-delay</td> 
   <td align="center">指定过渡开始之前的延时时间</td> 
   <td align="right">时间</td> 
  </tr> 
  <tr> 
   <td>transition-duration</td> 
   <td align="center">指定过渡的持续时间</td> 
   <td align="right">时间</td> 
  </tr> 
  <tr> 
   <td>transition-property</td> 
   <td align="center">指定应用的过渡属性</td> 
   <td align="right">字符串</td> 
  </tr> 
  <tr> 
   <td>transition-timing-function</td> 
   <td align="center">指定过渡期间计算中间值的方式</td> 
   <td align="right">五种预设曲线 ease（默认）、linear、ease-in、ease-out、ease-in-out</td> 
  </tr> 
  <tr> 
   <td>transition</td> 
   <td align="center">在一条声明中指定所有过渡细节的简写属性</td> 
   <td align="right">简写属性如下:transition：’transition-property’ ‘transition-duration’ ‘transition-timing-function’ ‘transition-delay’</td> 
  </tr> 
 </tbody> 
</table>

注意：使用过渡时要考虑浏览器的兼容问题：  
safari和Chrome：-webkit  
Firefox：-moz  
Opera：-o

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <style> .trs{ font-size:large;border:1px solid black;} .trs:hover{ font-size:x-large;color:red; transition:color,font-size 500ms 100ms; -webkit-transition:color,font-size 500ms 100ms; -moz-transition:color,font-size 500ms 100ms; -o-transition:color,font-size 500ms 100ms; } </style>
    </head>
    <body>
        <p class="trs">
            这是过渡！
        </p>
    </body>
    </html>

![结果][SouthEast 1]

*  **使用动画**  
    css动画的本质上是增强的过渡。属性如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">说明</th> 
   <th align="right">值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>animotion-delay</td> 
   <td align="center">设置动画开始前的延时</td> 
   <td align="right">时间</td> 
  </tr> 
  <tr> 
   <td>animotion-direction</td> 
   <td align="center">设置动画循环播放的时候是否反向播放</td> 
   <td align="right">normal、alternate</td> 
  </tr> 
  <tr> 
   <td>animotion-duration</td> 
   <td align="center">设置动画持续播放的时间</td> 
   <td align="right">时间</td> 
  </tr> 
  <tr> 
   <td>animotion-iteration-count</td> 
   <td align="center">设置动画循环播放的次数</td> 
   <td align="right">infinite、数字</td> 
  </tr> 
  <tr> 
   <td>animotion-name</td> 
   <td align="center">指定动画名称</td> 
   <td align="right">none、字符串</td> 
  </tr> 
  <tr> 
   <td>animotion-play-state</td> 
   <td align="center">允许动画暂停和重新播放</td> 
   <td align="right">running、paused</td> 
  </tr> 
  <tr> 
   <td>transition-timing-function</td> 
   <td align="center">指定过渡期间计算中间值的方式</td> 
   <td align="right">ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier</td> 
  </tr> 
  <tr> 
   <td>animotion</td> 
   <td align="center">简写属性</td> 
   <td align="right"></td> 
  </tr> 
 </tbody> 
</table>

animotion属性简写如下：  
animation：‘ animotion-name’‘animotion-duration’‘transition-timing-function ’‘animotion-delay’‘animotion-iteration-count’

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <style> .trs{ font-size:large;border:1px solid black;} .trs:hover{ -webkit-animation:'donghua' 500ms linear 100ms infinite ; } @-webkit-keyframes donghua{ to{ font-size:x-large; color:red; } } </style>
    </head>
    <body>
        <p class="trs">
            这是动画！
        </p>
    </body>
    </html>

![结果][SouthEast 2]

@-webkit-keyframes donghua{
            to{ font-size:x-large; //属性和属性值 color:red;//属性和属性值 }
        }

上面这部分代码相当于动画的关键帧，关键帧可以设置初始状态（from\{‘属性和属性值’\}或者0%\{‘属性和属性值’\}）、中间关键帧（50%\{ ‘属性和属性值’\}）和结束关键帧（to\{属性和属性值’\}或者100%\{‘属性和属性值’\}），中间关键帧可以是0%–100%中间的任意多个值。若使用多个动画：  
`-webkit-animation:'动画名1'，'动画名2','...' 500ms linear 100ms infinite ;`

*  **变换**  
    使用css可是实现线性变换，即旋转、缩放、倾斜和平移。  
    transform：指定应用的变换功能  
    transform-orign:指定变换的起点  
    *transform属性值：*

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>translateX（‘长度值或百分数值’）、translateY（‘长度值或百分数值’）、translate（‘长度值或百分数值’）</td> 
   <td align="center">在水平方向、竖直方向或者两个方向平移元素</td> 
  </tr> 
  <tr> 
   <td>scaleX（‘数值’）、scaleY（‘数值’）、scale（‘数值’）</td> 
   <td align="center">在水平方向、竖直方向或者两个方向缩放元素</td> 
  </tr> 
  <tr> 
   <td>rotate（‘角度’）</td> 
   <td align="center">旋转元素</td> 
  </tr> 
  <tr> 
   <td>skewX（‘角度’）、skewY（‘角度’）、skew（‘角度’）</td> 
   <td align="center">在水平方向、竖直方向或者两个方向倾斜元素</td> 
  </tr> 
  <tr> 
   <td>matrix（4~6个数值，逗号隔开）</td> 
   <td align="center">指定自定义变换</td> 
  </tr> 
 </tbody> 
</table>

*transform-orign属性值：*

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>%</td> 
   <td align="center">指定元素x轴或y轴的起点</td> 
  </tr> 
  <tr> 
   <td>长度值</td> 
   <td align="center">指定距离</td> 
  </tr> 
  <tr> 
   <td>left、right、center</td> 
   <td align="center">指定x轴上的位置</td> 
  </tr> 
  <tr> 
   <td>top、center、bottom</td> 
   <td align="center">指定y轴上的位置</td> 
  </tr> 
 </tbody> 
</table>

***将变换作为动画和过渡处理***

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <style> .trs{ width:100px;font-size:large;border:1px solid black;} .trs:hover{ -webkit-transition-duration:1.5s; -webkit-transform:rotate(360deg); } </style>
    </head>
    <body>
        <p class="trs">
            这是转换！
        </p>
    </body>
    </html>

![结果][SouthEast 3]

#### 总结： ####

使用这些特性可以对元素外观进行各种各样的设置，能够恰当的提升体验和增加灵活性。

[SouthEast]: /images/20220713/220543f6d26b46bfa63ff1b5dea47167.png
[SouthEast 1]: /images/20220713/369f64ba8b494cc899d6d883cea00a61.png
[SouthEast 2]: /images/20220713/4914c730ef4c474982439d7ad3d1a7c9.png
[SouthEast 3]: /images/20220713/39b21d04bf924f88a6c672d0c4b48aaa.png