<style>
/* basic design */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6,
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {
font-family: 'Meiryo UI', 'Source Sans Pro', Helvetica, sans-serif, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic';
text-align: left;
line-height: 1.6;
letter-spacing: normal;
text-shadow: none;
word-wrap: break-word;
color: #444;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {font-weight: bold;}
.reveal h1, .reveal h2, .reveal h3 {color: #2980b9;}
.reveal th {background: #DDD;}
.reveal section img {background:none; border:none; box-shadow:none; max-width: 95%; max-height: 95%;}
.reveal blockquote {width: 90%; padding: 0.5vw 3.0vw;}
.reveal table {margin: 1.0vw auto;}
.reveal code {line-height: 1.2;}
.reveal p, .reveal li {padding: 0vw; margin: 0vw;}
.reveal .box {margin: -0.5vw 1.5vw 2.0vw -1.5vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; background: #EEE; border-radius: 1.5vw;}
/* table design */
.reveal table {background: #f5f5f5;}
.reveal th {background: #444; color: #fff;}
.reveal td {position: relative; transition: all 300ms;}
.reveal tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa;}
.reveal tbody:hover tr:hover td {color: #444; text-shadow: 0 1px 0 #fff;}
/* blockquote design */
.reveal blockquote {
width: 90%;
padding: 0.5vw 0 0.5vw 6.0vw;
font-style: italic;
background: #f5f5f5;
}
.reveal blockquote:before{
position: absolute;
top: 0.1vw;
left: 1vw;
content: "\f10d";
font-family: FontAwesome;
color: #2980b9;
font-size: 3.0vw;
}
/* font size */
.reveal h1 {font-size: 5.0vw;}
.reveal h2 {font-size: 4.0vw;}
.reveal h3 {font-size: 2.8vw;}
.reveal h4 {font-size: 2.6vw;}
.reveal h5 {font-size: 2.4vw;}
.reveal h6 {font-size: 2.2vw;}
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;}
.reveal code {font-size: 1.6vw;}
/* new color */
.red {color: #EE6557;}
.blue {color: #16A6B6;}
/* split slide */
#right {left: -18.33%; text-align: left; float: left; width: 50%; z-index: -10;}
#left {left: 31.25%; text-align: left; float: left; width: 50%; z-index: -10;}
</style>
<style>
/* specific design */
.reveal h2 {
padding: 0 1.5vw;
margin: 0.0vw 0 2.0vw -2.0vw;
border-left: solid 1.2vw #2980b9;
border-bottom: solid 0.8vw #d7d7d7;
}
</style>
<!-- --------------------------------------------------------------------------------------- -->
#### Lightning Talk @Infocom (2019.08.05)
<br>
# CSSアニメーションのすゝめ
<br>
<br>
### 野田 寛人 (のだ ひろと)
#### インフォコム 2020年度新卒
<br>
#### 2020.06.11
---
## 新人研修でやったこと
- HTML上のオブジェクトの位置をCSSで指定する
- ボックスモデル(margin, padding, border)
- 基本的に位置・幅の指定、固定
---
## どうしてCSSでアニメーションを動かすのか
- 軽い(処理が速い)
- JavaScriptを使わなくてもいい
- なめらか
---
<img src="https://media3.giphy.com/media/zaNqQCE46F7q0/giphy.gif?cid=790b76115d429b964753356d4d37bf17&rid=giphy.gif" width="100%">
---
### 例: Squash and stretch(つぶして延ばす)
<iframe height='600' scrolling='no' title='Interactive email tutorial' src='https://codepen.io/rnashiron/pen/VoMGVM' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
</iframe>
---
<img src="https://media1.giphy.com/media/cE8fjDn1URVO8/giphy.gif?cid=790b76115d425924665962424d047cfd&rid=giphy.gif" width="80%">
---
### 例: Follow Through and Overlapping Action(振り抜いて急停止)
<iframe height='600' scrolling='no' title='Interactive email tutorial' src='
https://codepen.io/rnashiron/pen/BXwOqO' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>
---
## CSS "animation" : 呼び出し・実行
```css
.blue-box{
animation: five 4s infinite }
/* (1) (2) (3) */
```
<br>
(1) five という**アニメーション**を
(2) 4秒間を**1回**として
(3) 無限回**くりかえし**てね
---
## @keyframe でアニメーションを定義しておく
〇%の時点でのプロパティを書き換える
```css
@keyframes five {
0% {
transform: translateX(-12em);
opacity: 0;
}
50% {
transform: translateX(-12em);
opacity: 1;
}
100% {
transform: translateX(12em);
opacity: 0;
}
}
```
---
### ％ = アニメーション全体を0%~100%と見たときの時間指定
```css
@keyframes run { /* Red box */
0% {/* スタート位置 */}
100% {/* ゴール位置 */} }
```
```css
@keyframes run2 { /* Blue box */
0%, 50% {/* スタート位置 */}
100% {/* ゴール位置 */} }
```
```css
@keyframes run3 { /* Green */
0%, 25% {/* スタート位置 */}
75%, 100% {/* ゴール位置 */} }
```
<div style="text-align:center">
<img src="https://i.imgur.com/pOiQsQ2.png" width="50%">
</div>
---
### ％ = アニメーション全体を0%~100%と見たときの時間指定
<iframe height='600' scrolling='no' title='Interactive email tutorial' src='
https://codepen.io/rnashiron/pen/dxzKMj' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>
---
## cubic-bezier ?
```css
.five .shape {
animation: five 4s infinite cubic-bezier(.64,-0.36,.1,1);
/* |----------------------------| <- これ */
}
```
- **transition-timing-function**プロパティ
<br>
- 時間の流れ(0%~100%)の**緩急**を設定
<br>
linear : 直線的な流れ
ease : ゆっくり始まり 中急ぎ ゆっくり終わる
**cubic-bezier** : より細密に指定 マイナス値も取れる（逆に動く）
---
### 同じアニメーションを指定してもこんなに違う
<iframe height='600' scrolling='no' title='Interactive email tutorial' src='
https://codepen.io/rnashiron/pen/qePKxY' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%'></iframe>
---
<br>
<br>
<br>
<div style="margin: 10px auto; width:80%;">
# あとは @keyframe の{}内に
# オブジェクトの位置や大きさ等を
# 指定するだけ！
</div>
---
## transform : 移動・回転・変形
<iframe height='600' scrolling='no' title='Interactive email tutorial' src='
https://codepen.io/rnashiron/pen/OKxVqy' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>
---
## transform : 移動・回転・変形
<iframe height='600' scrolling='no' title='Interactive email tutorial' src='
https://codepen.io/rnashiron/pen/eqGEwZ' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>
---
## opacity : 濃度・不透明度
<iframe height='600' scrolling='no' title='Interactive email tutorial' src='
https://codepen.io/rnashiron/pen/mNMKpZ' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>
---
## **@keyframe まとめ**
1. ### %（時間）の仕組み
2. ### 移動・回転・変形・濃さなど (transform/opacity ...etc)
3. ### <s>タイミングをずらす</s>
- ### **transition-timing-function**
- タメ・緩急・反動 も！
- ##### 参考: "Animation Principles for the Web"
- 基本的で実用的なテンプレ
- コピペですぐ使える
- 12 basic principles of animation (1981, Disney animators)
{"metaMigratedAt":"2023-06-15T09:21:15.311Z","metaMigratedFrom":"YAML","title":"CSSアニメーションのすゝめ","breaks":true,"slideOptions":"{\"theme\":\"white\",\"slideNumber\":\"c/t\",\"center\":false,\"transition\":\"none\",\"keyboard\":true,\"width\":\"93%\",\"height\":\"100%\"}","contributors":"[{\"id\":\"ef31a8f3-8b4b-42d6-9588-de6cb817c479\",\"add\":9702,\"del\":2824}]"}