# CSS ANIMATION <span class="in-ib ib"><b class="in">入</b>門</span>
<p class="right">by <a href="//fb.me/Rplus.tw">Rplus Chen</a></p>
---
#### 今天的主角
[](https://beesandbombs.tumblr.com/post/145982749309/drops-on-a-pond)
> src: [Bees & Bombs — drops on a pond 🌧](https://beesandbombs.tumblr.com/post/145982749309/drops-on-a-pond)
---
#### 今天的主角 [停格版]
> 可參考 [以前分解 GIF 的小心得](https://www.facebook.com/events/592228990917125/permalink/596253317181359/)
---
#### 今天的主角 [分解版]
---
### 我們需要什麼：
1. 會變大的圓圈
2. 垂直降落的雨滴 & 它的倒影
<small class="right" style="display: block; opacity: .6; margin-top: 2em; padding-top: 2em;">
有想跟著實作的可以試試這個 codepen 模版 <br>
<a href="http://codepen.io/RplusTW/pen/PzywLE/?editors=1100">http://codepen.io/RplusTW/pen/PzywLE/?editors=1100</a>
</small>
---
### [1.1](https://jsbin.com/hacilez/1/edit?css,output) ~~會變大的~~圓圈
```jade
// jade
.raingdrops
```
```scss
// scss
$ripple-size: 10em;
.raingdrops {
width: $ripple-size;
height: $ripple-size;
border-radius: 50%;
box-shadow: inset 0 0 0 3px;
}
```
<img class="ss" src="https://i.imgur.com/eHN5k6F.png">
---
### [1.2](https://jsbin.com/hacilez/2/edit?css,output) ~~會變大的~~圓圈 <= 定位
```scss
// scss
.raingdrops {
// 置中定位
position: absolute;
top: calc(50% - #{$ripple-size / 2});
left: calc(50% - #{$ripple-size / 2});
}
```
<img class="ss" src="https://i.imgur.com/9iKlt5q.png">
---
### [2.1](https://jsbin.com/hacilez/3/edit?css,output) ~~垂直降落~~的雨滴
```scss
$rain-size: 2px;
.raingdrops {
&::before {
content: "";
position: absolute;
top: calc(50% - #{$rain-size / 2});
left: 50%;
width: $ripple-size / 2;
border-top: $rain-size solid;
}
}
```
<img class="ss" src="https://i.imgur.com/mXfWAXx.png">
---
### [2.2](https://jsbin.com/hacilez/4/edit?css,output) 垂直(?)~~降落~~的雨滴
```scss
.raingdrops {
&::before {
transform: rotateY(-90deg);
}
}
```
<img class="ss" src="https://i.imgur.com/l1G1i4q.png">
---
### [2.3](https://jsbin.com/hacilez/5/edit?css,output) 垂直~~降落~~的雨滴
```scss
.raingdrops {
transform-style: preserve-3d;
&::before {
transform-origin: 0% 50%;
}
}
.pond {
transform: rotateX(60deg);
transform-style: preserve-3d;
}
.box {
perspective: 400px;
}
```
<img class="ss" src="https://i.imgur.com/Z4HznD4.png">
---
### [2.4](https://jsbin.com/hacilez/6/edit?css,output) 垂直~~降落~~的雨滴 & 倒影
```scss
.raingdrops {
&::before,
&::after {
}
&::after {
opacity: .3;
transform: rotateY(90deg);
}
}
```
<img class="ss" src="https://i.imgur.com/2zIYYiu.png">
---
### [3.1](https://jsbin.com/hacilez/7/edit?css,output) 會變大的圓圈 <= 動畫
```scss
$duration: .4s;
.raingdrops {
animation: ripple $duration infinite ease-out;
}
@keyframes ripple {
from { transform: scale(0); }
to { transform: none; }
}
```
？：雨滴也跟著變大變小？
---
### [3.2](https://jsbin.com/hacilez/9/edit?css,output) 會變大的圓圈 <= 重新配置
```jade
.raingdrops
.ripple
```
```scss
.ripple {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
// 舊的 style 搬過來~
box-shadow: inset 0 0 0 $rain-size;
border-radius: 50%;
animation: ripple $duration infinite ease-out;
}
```
---
### [4.1](https://jsbin.com/hacilez/10/edit?css,output) 垂直降落的雨滴
```scss
$rain-distance: $ripple-size * 2;
.raingdrops {
&::before,
&::after {
animation: raindrops $duration infinite ease-in;
}
&::after {
animation-name: anti-raindrops;
}
}
@keyframes raindrops {
0% { transform: rotateY(-90deg) translate3d($rain-distance, 0, 0); }
80% { transform: rotateY(-90deg) translate3d(0, 0, 0) scaleX(1); }
100% { transform: rotateY(-90deg) translate3d(0, 0, 0) scaleX(0); }
}
@keyframes anti-raindrops {
0% { transform: rotateY(90deg) translate3d($rain-distance, 0, 0); }
80% { transform: rotateY(90deg) translate3d(0, 0, 0) scaleX(1); }
100% { transform: rotateY(90deg) translate3d(0, 0, 0) scaleX(0); }
}
```
<img class="ss" src="https://i.imgur.com/iZ1IMXs.png">
---
### [5.1](https://jsbin.com/hacilez/11/edit?css,output) 分身
```jade
- each _ in Array(14)
.raingdrops
.ripple
```
---
### [5.2](https://jsbin.com/hacilez/12/edit?css,output) 分身定位
```scss
$count: 14;
.raingdrops {
@for $i from 1 through $count {
&:nth-of-type(#{$i}) {
transform: rotate(#{$i * 360deg / $count}) translateX(75%);
}
}
}
```
<img class="ss" src="https://i.imgur.com/JiEORSO.png">
---
### [5.3](https://jsbin.com/hacilez/13/edit?css,output) 分身動畫延時
```scss
.raingdrops {
@for $i from 1 through $count {
&:nth-of-type(#{$i}) {
&::before,
&::after {
animation-delay: ($i - 1 - $count) * $duration;
}
}
}
&::before,
&::after {
animation: raindrops ($duration * $count) infinite ease-in;
}
}
.ripple {
animation: ripple ($duration * $count) infinite ease-out;
@for $i from 1 through $count {
.raingdrops:nth-of-type(#{$i}) & {
animation-delay: ($i - $count) * $duration;
}
}
}
```
---
### [5.4](https://jsbin.com/hacilez/14/edit?css,output) 分身漣漪動畫修正
```scss
@keyframes ripple {
0% {
transform: scale(0);
opacity: 1;
}
30% {
opacity: .75;
}
50%,
100% {
transform: none;
opacity: 0;
}
}
```
---
### [5.5](https://jsbin.com/hacilez/15/edit?css,output) 分身雨滴動畫修正
```scss
@keyframes raindrops {
0% {
transform: rotateY(-90deg) translate3d($rain-distance, 0, 0) scaleX(1);
}
#{100% / $count} {
transform: rotateY(-90deg) translate3d(0, 0, 0) scaleX(1);
}
100%,
#{1.15 * 100% / $count} {
transform: rotateY(-90deg) translate3d(0, 0, 0) scaleX(0);
}
}
@keyframes anti-raindrops {
0% {
transform: rotateY(90deg) translate3d($rain-distance, 0, 0) scaleX(1);
}
#{100% / $count} {
transform: rotateY(90deg) translate3d(0, 0, 0) scaleX(1);
}
100%,
#{1.15 * 100% / $count} {
transform: rotateY(90deg) translate3d(0, 0, 0) scaleX(0);
}
}
```
---
### 6. 還有細節修正
*******
* 雨滴角度校正
* 雨滴弧度
* 倒影亮度校正
* …
---
## CSS ANIMATION <span class="in-ib ib"><span style="color: #222">遁</span>入<span style="color: #222">空</span>門</span>
---
## CSS ANIMATION <span class="in-ib ib">遁入空門</span>
<style>
.left {
text-align: left;
}
.right {
text-align: right;
}
.ib {
display: inline-block;
}
.in.in {
position: relative;
display: inline-block;
margin-right: -.7em;
transition: transform .3s;
transform: scale(.75, .4) rotateY(180deg) translateY(50%);
color: #f00;
font-weight: 900;
text-shadow: -.05em .025em .05em #000;
}
h1:hover .in {
transform: scale(.75, .4) rotateY(0deg) translateY(50%);
}
.reveal img {
border: none;
}
.reveal blockquote {
font-size: smaller;
}
img.ss {
position: fixed;
top: 0;
right: 0;
z-index: -1;
opacity: 0;
}
img.ss:hover {
z-index: 1;
opacity: 1;
}
</style>
{"metaMigratedAt":"2023-06-14T11:48:13.998Z","metaMigratedFrom":"Content","title":"CSS ANIMATION <span class=\"in-ib ib\"><b class=\"in\">入</b>門</span>","breaks":true,"contributors":"[]"}