css3动画制作转动相册

小咪咪 2022-12-28 12:49 166阅读 0赞

--------------------

# 一、CSS3 动画 #

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

--------------------

## 1.CSS3 @keyframes 规则 ##

1.  要创建 CSS3 动画，你需要了解 @keyframes 规则。
2.  @keyframes 规则是创建动画。
3.  @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

## 2.CSS3动画是什么？ ##

*  动画是使元素从一种样式逐渐变化为另一种样式的效果。
 *  您可以改变任意多的样式任意多的次数。
 *  请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
 *  0% 是动画的开始，100% 是动画的完成。
 *  为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
 *

--------------------

## 3.CSS3 动画 ##

1.  当在 **@keyframes** 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
2.  **注意:** 必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
3.  指定至少这两个CSS3的动画属性绑定向一个选择器：
4.  animation-name：规定动画的名称: 【注】动画名不要起关键字，最好见名知意 。
5.   animation-duration ：规定动画的时长

## 4.CSS3的动画属性 ##

下面的表格列出了 @keyframes 规则和所有动画属性：

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>CSS</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/cssref/css3-pr-animation-keyframes.html" rel="nofollow">@keyframes</a></td> 
   <td>规定动画。</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/cssref/css3-pr-animation.html" rel="nofollow">animation</a></td> 
   <td>所有动画属性的简写属性。</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/cssref/css3-pr-animation-name.html" rel="nofollow">animation-name</a></td> 
   <td>规定 @keyframes 动画的名称。</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/cssref/css3-pr-animation-duration.html" rel="nofollow">animation-duration</a></td> 
   <td>规定动画完成一个周期所花费的秒或毫秒。默认是 0。</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/cssref/css3-pr-animation-timing-function.html" rel="nofollow">animation-timing-function</a></td> 
   <td>规定动画的速度曲线。默认是 "ease"。</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/cssref/css3-pr-animation-fill-mode.html" rel="nofollow">animation-fill-mode</a></td> 
   <td>规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/cssref/css3-pr-animation-delay.html" rel="nofollow">animation-delay</a></td> 
   <td>规定动画何时开始。默认是 0。</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/cssref/css3-pr-animation-iteration-count.html" rel="nofollow">animation-iteration-count</a></td> 
   <td>规定动画被播放的次数。默认是 1。</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/cssref/css3-pr-animation-direction.html" rel="nofollow">animation-direction</a></td> 
   <td>规定动画是否在下一周期逆向地播放。默认是 "normal"。</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/cssref/css3-pr-animation-play-state.html" rel="nofollow">animation-play-state</a></td> 
   <td>规定动画是否正在运行或暂停。默认是 "running"。</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

## [5、animation属性][5_animation] ##

### 5.1animation-duration ###

属性定义动画完成一个周期需要多少秒或毫秒。

<html>
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background: green;
                position: relative;
                animation: mymove infinite;
                animation-duration: 2s;
            }
            
            @keyframes mymove {
                from {
                    transform: translateX(0px);
                }
                to {
                    transform: translateX(200px);
                }
            }
        </style>
    </head>
    
    <body>
        <p><strong>注意:</strong> animation-duration属性不兼容 Internet Explorer 9 以及更早版本的浏览器.</p>
        
        <div></div>
        <p><b>注意:</b> 要指定动画属性。否则时间若是0,动画不会进行。</p>
    </body>
    
    </html>

### 5.2animation-timing-function ###

**标签定义及使用说明**

*  animation-timing-function指定动画将如何完成一个周期。
 *  速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
 *  速度曲线用于使变化更为平滑。

**语法**

1.  animation-timing-function: *value*;
2.  animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一：

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>linear</td> 
   <td>动画从头到尾的速度是相同的。</td> 
  </tr> 
  <tr> 
   <td>ease</td> 
   <td>默认。动画以低速开始，然后加快，在结束前变慢。</td> 
  </tr> 
  <tr> 
   <td>ease-in</td> 
   <td>动画以低速开始。</td> 
  </tr> 
  <tr> 
   <td>ease-out</td> 
   <td>动画以低速结束。</td> 
  </tr> 
  <tr> 
   <td>ease-in-out</td> 
   <td>动画以低速开始和结束。</td> 
  </tr> 
  <tr> 
   <td>cubic-bezier(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td> 
   <td>在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</td> 
  </tr> 
 </tbody> 
</table>

## 5.3animation-direction ##

### 定义和用法 ###

animation-direction 属性定义是否循环交替反向播放动画。

**注意：**如果动画被设置为只播放一次，该属性将不起作用。

### CSS 语法 ###

### 属性值 ###

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>normal</td> 
   <td>默认值。动画按正常播放。</td> 
  </tr> 
  <tr> 
   <td>reverse</td> 
   <td>动画反向播放。</td> 
  </tr> 
  <tr> 
   <td>alternate</td> 
   <td>动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。</td> 
  </tr> 
  <tr> 
   <td>alternate-reverse</td> 
   <td>动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 5.4animation-fill-mode ##

### 定义和用法 ###

animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

### CSS 语法 ###

### 属性值 ###

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。</td> 
  </tr> 
  <tr> 
   <td>forwards</td> 
   <td>在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。</td> 
  </tr> 
  <tr> 
   <td>backwards</td> 
   <td>动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。</td> 
  </tr> 
 </tbody> 
</table>

### 实例 ###

把物体动画地从一个地方移动到另一个地方，并让它停留在那里：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>)</title>
        <style>
            .box {
                width: 100px;
                height: 100px;
                background: red;
                position: relative;
                animation: mymove 3s;
                animation-iteration-count: 2;
                animation-fill-mode: forwards;
            }
            
            .box1 {
                width: 100px;
                height: 100px;
                background: green;
            }
            
            @keyframes mymove {
                from {
                    transform: translateX(0px);
                }
                to {
                    transform: translateX(200px);
                }
            }
        </style>
    </head>
    
    <body>
    
        <p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>
    
        <div class="box">
    
        </div>
        <div class="box1">我是固定的</div>
    
    </body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][]

--------------------

## 5.5animation-iteration-count ##

### 标签定义及使用说明 ###

animation-iteration-count属性定义动画应该播放多少次。

## 语法 ##

animation-iteration-count: *value*;

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>n</em></td> 
   <td>一个数字，定义应该播放多少次动画</td> 
  </tr> 
  <tr> 
   <td>infinite</td> 
   <td>指定动画应该播放无限次（永远）</td> 
  </tr> 
 </tbody> 
</table>

## 5.6animation--play-state ##

### 标签定义及使用说明 ###

animation--play-state属性指定动画是否正在运行或已暂停。

## 语法 ##

animation-play-state: paused|running;

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>paused</td> 
   <td>指定暂停动画</td> 
  </tr> 
  <tr> 
   <td>running</td> 
   <td>指定正在运行的动画</td> 
  </tr> 
 </tbody> 
</table>

### 实例鼠标悬停动画进行，配合3D制作旋转相册： ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            li {
                list-style: none;
            }
            
            body {
                background-image: radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%);
            }
            
            .box {
                width: 600px;
                height: 340px;
                position: absolute;
                top: 50%;
                margin-top: -170px;
                left: 50%;
                margin-left: -300px;
                transform-style: preserve-3d;
                transition: all 500s;
                transform: rotateX(-5deg);
                animation: turn 10s linear infinite paused;
            }
            
            .item {
                position: absolute;
                left: 0;
                top: 0;
                width: 600px;
                height: 340px;
                background-size: 600px;
            }
            /* 正面 */
            
            .item:nth-child(1) {
                background-image: url(./img/2.jpg);
                transform: translateZ(600px);
            }
            /* 后面 */
            
            .item:nth-child(2) {
                background-image: url(./img/m1.jpg);
                transform: translateZ(-600px);
            }
            /* 左后 */
            
            .item:nth-child(3) {
                background-image: url(./img/3.jpg);
                transform: rotateY(60deg) translateZ(-600px);
            }
            /* 左前 */
            
            .item:nth-child(4) {
                background-image: url(./img/4.jpg);
                transform: rotateY(-60deg) translateZ(600px);
            }
            /* 右前 */
            
            .item:nth-child(5) {
                background-image: url(./img/5.jpg);
                transform: rotateY(60deg) translateZ(600px);
            }
            /* 右后 */
            
            .item:nth-child(6) {
                background-image: url(./img/6.jpg);
                transform: rotateY(-60deg) translateZ(-600px);
            }
            /*         
            .box:hover {
                transform: rotateX(-5deg) rotateY(36000deg);
            } */
            
            .box:hover {
                animation-play-state: running;
            }
            
            @keyframes turn {
                to {
                    transform: rotateX(-5deg) rotateY(360deg);
                }
            }
        </style>
    </head>
    
    <body>
    
        <ul class="box">
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
    </body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1][]

--------------------

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 2][] #

[5_animation]: https://www.runoob.com/cssref/css3-pr-animation-play-state.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221120/c0b9063760084f5d946d32719be5e3d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1]: /images/20221120/7e8d25364dbc48db82838c6d01e7ff69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 2]: /images/20221120/1ca7cc8cefaa4f1f94c6fbabfd5c0caf.png