浅谈CSS过渡、动漫和转换

2021-01-20 05:38 jianzhan

1. 应用过渡

过渡实际效果1般是由访问器立即更改元素的CSS特性完成的。比如，假如应用:hover挑选器，1旦客户将电脑鼠标悬停在元素之上，访问器就会运用跟挑选器关系的特性。

当客户将电脑鼠标悬停在span元素上的情况下，访问器就会回应，立即运用新的特性。转变以下图所示：

CCS过渡特性容许操纵运用新特性值的速率。例如能够挑选慢慢更改示例中span元素的外型，让电脑鼠标移到单词banana上的实际效果更和睦。

 

transition-delay 和 transition-duration 特性特定为CSS時间，是1个数据，企业为ms（毫秒）或s（秒）。

transition简写特性的文件格式以下： 

XML/HTML Code拷贝內容到剪贴板
  1. transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>  

改动前面示例的CSS编码以下：

XML/HTML Code拷贝內容到剪贴板
  1. p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}   
  2. #banana { font-size: large; border: medium solid green;}   
  3. #banana:hover {   
  4.     font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;   
  5.     transition-delay: 100ms;   
  6.     transition-property: background-color,color,padding,font-size,border;   
  7.     transition-duration: 500ms;   
  8. }  

在这个事例中，为款式加上了过渡，是根据#banana:hover 挑选器运用的。过渡会在客户将电脑鼠标悬停在span元素上100ms以后刚开始，不断時间为500ms，过渡运用到 background-color、color、padding、font-size和border特性。下面的实际效果图展现了这个过渡的渐进全过程：

留意这个示例中特定好几个特性的方法。过渡特性的值用逗号分隔，这样过渡实际效果才会另外出現。能够为延迟时间時间和不断時间特定好几个值，它意味着的意思是不一样的特性在不一样的時间点刚开始过渡，且不断時间也不一样。

1.1 建立反方向过渡

过渡仅有在运用与其关系的款式时才会起效。示例款式中应用了:hover 挑选器，这代表着仅有客户将电脑鼠标悬停在span元素上才会运用款式。客户1旦将电脑鼠标从span元素上已开，只剩余#banana款式，默认设置状况下，元素的外型会马上返回原始情况。

由于这个缘故，大多数数过渡成对出現：临时情况的过渡和方位相反的反方向过渡。改动前面示例的CCS编码，从而展现怎样根据运用另外一种过渡款式光滑地回到原始款式。

CSS Code拷贝內容到剪贴板
  1. p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}   
  2. #banana {   
  3.     font-size: large; border: medium solid green;   
  4.     transition-delay: 100ms;   
  5.     transition-duration: 500ms;}   
  6. #banana:hover {   
  7.     font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;   
  8.     transition-delay: 100ms;   
  9.     transition-property: background-color,color,padding,font-size,border;   
  10.     transition-duration: 500ms;   
  11. }  

1.2 挑选正中间值的测算方法

应用过渡时，访问器必须为每一个特性测算原始值和最后值之间的正中间值。应用transition-timing-function 特性特定测算正中间值的方法，表明为4个点操纵的3次贝塞尔曲线图。有5种预设曲线图能够挑选，由下面的值表明：

* ease（默认设置值）

* linear

* ease-in

* ease-out

* ease-in-out

从下图能够看到这5种曲线图，它们展现了正中间值伴随着時间的推移变成最后值的速度。

弄清楚这些值最简易的方法便是在自身的HTML文本文档中实验。也有此外1个值 cubic-bezier，能用来特定自定曲线图。

改动前面示例的CSS款式以下，展现 transition-timing-function 特性的运用：

CSS Code拷贝內容到剪贴板
  1. p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}   
  2. #banana {   
  3.     font-size: large; border: medium solid green;   
  4.     transition-delay: 10ms;   
  5.     transition-duration: 250ms;;   
  6. }   
  7. #banana:hover {   
  8.     font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;   
  9.     transition-delay: 100ms;   
  10.     transition-property: background-color,color,padding,font-size,border;   
  11.     transition-duration: 500ms;   
  12.     transition-timing-function: linear;   
  13. }  

2. 应用动漫

CSS动漫实质上是提高的过渡。在怎样从1种款式过渡到另外一种款式的全过程中，具备了更多挑选、更多操纵，和更多灵便性。

animation 简写特性的文件格式以下：

XML/HTML Code拷贝內容到剪贴板
  1. animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count>  

留意，这些特性都并不是用来特定要做为动漫的CSS特性的。这是由于动漫是在两一部分界定的。第1一部分包括在款式申明中，应用了上面表格中列出的特性。它们界定了动漫的款式，但并沒有界定哪些特性是动漫。第2一部分应用@key-frames标准对话框，用来界定界定动漫的特性。从下面编码中能够看到界定动漫的这两一部分。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         #ball{   
  8.             width: 180px; height: 180px; background-color:green; margin:20px auto;border-radius: 90px;   
  9.             -webkit-animation-delay: 100ms;   
  10.             -webkit-animation-duration: 2000ms;   
  11.             -webkit-animation-iteration-count: infinite;   
  12.             -webkit-animation-timing-function: linear;   
  13.             -webkit-animation-name:'GrowQuare';   
  14.         }   
  15.         @-webkit-keyframes GrowQuare {   
  16.             to {   
  17.                 background-color: yellow;   
  18.                 border-radius: 0;   
  19.             }   
  20.         }   
  21.     </style>  
  22. </head>  
  23. <body>  
  24. <div id="ball"></div>  
  25. </body>  
  26. </html>  

要搞清楚在这个示例中做了甚么，应当细心科学研究1下动漫的两一部分。第1一部分是在款式中界定动漫特性，是跟#ball挑选器1起的。先看看基础特性：挑选器款式运用100ms后刚开始播发动漫特性，不断時间2000ms，无尽反复播发，正中间值应用linear涵数测算。除反复播发动漫，这些特性在过渡中都有对应特性。

这些基础的特性并沒有指出为哪些CSS特性运用动漫。为此，要应用 animation-name 特性给动漫特性起个姓名，这里叫 GrowsQuare 。这样，就非常于告知访问器找1组名为 GrowQuare 的重要帧，随后将这些基础特性的值运用到 @keyframes特定的动漫特性上。下面是此例编码中重要帧的申明（这里省略了-webkit前缀）：

CSS Code拷贝內容到剪贴板
  1. @-webkit-keyframes GrowQuare {   
  2.      to {   
  3.          background-color: yellow;   
  4.          border-radius: 0;   
  5.      }   
  6.  }  

申明的刚开始是@keyframes，接着特定了这组重要帧的姓名 GrowQuare。申明內部特定了1组要运用的动漫实际效果。to 申明界定了1组设定动漫款式的特性，另外也界定了动漫完毕时这些特性的最后值。动漫的原始值来自开展动漫解决的元素在运用款式以前的特性值。

此例的实际效果是1个尺寸为180像素的圆形，渐变色成正方形。其显示信息实际效果以下图所示：

（待续）

以上这篇浅谈CSS过渡、动漫和转换便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

原文详细地址：http://www.cnblogs.com/luka/archive/2016/07/20/5689833.html

为您推荐