CSS 執行兩個動畫
隨著互聯網的發展,越來越多的人開始使用 CSS 來創建交互式網頁和應用程序。CSS 動畫是一種使用 CSS 樣式來創建動態效果的技術。本文將介紹如何使用 CSS 執行兩個動畫。
CSS 動畫可以通過添加 `@keyframes` 規則和屬性來實現。`@keyframes` 規則定義了動畫的keyframes,每個keyframes 定義了動畫的每個狀態。例如,下面的規則定義了一個旋轉動畫:
```css
@keyframes rotate {
0% {
transform: rotate(0deg);
100% {
transform: rotate(360deg);
在這個例子中,規則定義了一個旋轉角度為 0 到 360 度的旋轉動畫。
除了 `@keyframes` 規則,還可以使用屬性來指定動畫的狀態。例如,下面的屬性定義了一個水平翻轉動畫:
```css
transform-origin: 0 100%;
在這個例子中,`transform-origin` 屬性定義了動畫的位置和大小。如果 `transform-origin` 屬性沒有被顯式地設置,則該元素將具有默認的 `top` 和 `left` 屬性,這些屬性將定義元素的位置和大小。
現在讓我們來演示如何使用 CSS 執行兩個動畫。以下是一個使用 CSS 動畫實現兩個水平翻轉效果的示例:
```html
<div class="reverse-slide">
</div>
</div>
<div class="slide-forward">
</div>
</div>
.reverse-slide {
position: relative;
width: 300px;
height: 200px;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 200px;
background-color: #fff;
.reverse-slide:before,
.reverse-slide:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #fff;
.reverse-slide:after {
left: 0;
transform: rotate(-45deg);
.slide-forward {
position: relative;
width: 300px;
height: 200px;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 200px;
background-color: #fff;
.slide-forward:before,
.slide-forward:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #fff;
.slide-forward:after {
left: 0;
transform: rotate(45deg);
在這個示例中,我們使用兩個 `.reverse-slide` 元素來實現兩個水平翻轉效果。在每個 `.reverse-slide` 元素中,我們使用 `:before` 和 `:after` 偽元素來創建兩個水平翻轉效果。這些偽元素被設置為絕對定位,并使用 `transform` 屬性來實現水平翻轉。
通過使用 CSS 動畫,我們可以創建出復雜的交互式網頁和應用程序。