├── .gitignore ├── LICENSE ├── readme.md └── dokaben.css /.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Reona Oshima (totoraj) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # ドカベンCSS 2 | 3 | ドカベンのタイトル風なアニメーションをさせるCSS 4 | 5 | [Demo](https://totoraj930.github.io/dokaben-css) 6 | 7 | [Download](https://github.com/totoraj930/dokaben-css/archive/master.zip) 8 | 9 | ## 使い方 10 | 11 | 下記のファイルを読み込んでください。 12 | 13 | * dokaben.css 14 | 15 | ```html 16 | 17 | ``` 18 | 19 | 20 | ### 使用例 21 | 22 | #### 基本 23 | ```html 24 |

これはテストです

25 | ``` 26 | 27 | #### 一部だけ 28 | ```html 29 |

文章の中のここだけがアニメーションされます。

30 | ``` 31 | 32 | #### コマ落とし？ 33 | ```html 34 |

35 | コマオトシ アリ 36 | と 37 | コマオトシ　ナシ 38 |

39 | ``` 40 | 41 | #### ホバーしたとき 42 | ```html 43 |

ここにマウスがのると動くよ

44 | ``` 45 | 46 | #### ドカベンっぽい文字 47 | ```html 48 |

ドカベン

49 | ``` 50 | 51 | 52 | ### 高度な使い方 53 | 54 | #### 速度を変える 55 | ```html 56 |

ハヤイ ヤツ

57 | ``` 58 | 59 | #### コマ落としを調整する 60 | ```html 61 |

カクカク

62 | ``` 63 | 64 | ### 各classの説明 65 | 66 | |class|説明| 67 | |-----|-----| 68 | |`.dokaben`|アニメーションさせたい要素につける| 69 | |`.dkbn-up`|起き上がるアニメーション| 70 | |`.dkbn-down`|倒れるアニメーション| 71 | |`.dkbn-loop`|up → down → up...の繰り返し| 72 | |`.dkbn-loop2`|down → up → down...の繰り返し| 73 | |`.dkbn-down-no`|倒れた状態にする| 74 | |`.dkbn-steps`|アニメーションがコマ落ち(18コマ/1アニメーション)になる| 75 | |`.dkbn-hover`|これを付けた要素がホバーされたときに子要素の`.dokaben`がアニメーションを開始する| 76 | |`.dkbn-text`|ドカベンっぽい文字にする| 77 | 78 | 79 | ### 注意 80 | 81 | `.dokaben`を指定した要素は`display: inline-block`になります。 82 | デザインが崩れる原因となりますので入れ子にするなどして対処してください。 83 | 84 | ## 著者 85 | **Reona Oshima (totoraj)** 86 | * [http://totoraj.net](http://totoraj.net/) 87 | * [Twitter: @totoraj930](https://twitter.com/totoraj930/) 88 | 89 | 90 | ## ライセンス 91 | Copyright © 2016 Reona Oshima (totoraj) 92 | This work is released under the MIT License. 93 | -------------------------------------------------------------------------------- /dokaben.css: -------------------------------------------------------------------------------- 1 | .dokaben { 2 | transform-origin: bottom center; 3 | display: inline-block; 4 | } 5 | .dkbn-steps { 6 | animation-timing-function: steps(18); 7 | } 8 | .dkbn-loop.dkbn-steps, 9 | .dkbn-loop2.dkbn-steps { 10 | animation-timing-function: steps(36); 11 | } 12 | .dkbn-down-no { 13 | transform: matrix3d(1,0,0.00,0,0.00,0,1.00,-0.005,0,-1,0,0,0,0,0,1); 14 | } 15 | .dkbn-up, 16 | .dkbn-hover:hover > .dkbn-up, 17 | .dkbn-hover:focus > .dkbn-up { 18 | animation-name: dokaben-up; 19 | animation-duration: 1500ms; 20 | } 21 | .dkbn-down, 22 | .dkbn-hover:hover > .dkbn-down, 23 | .dkbn-hover:focus > .dkbn-down { 24 | animation-name: dokaben-down; 25 | animation-duration: 1500ms; 26 | } 27 | .dkbn-loop, 28 | .dkbn-hover:hover > .dkbn-loop, 29 | .dkbn-hover:focus > .dkbn-loop { 30 | animation-name: dokaben-loop; 31 | animation-duration: 3000ms; 32 | animation-iteration-count: infinite; 33 | } 34 | .dkbn-loop2, 35 | .dkbn-hover:hover > .dkbn-loop2, 36 | .dkbn-hover:focus > .dkbn-loop2 { 37 | animation-name: dokaben-loop2; 38 | animation-duration: 3000ms; 39 | animation-iteration-count: infinite; 40 | } 41 | .dkbn-hover > .dokaben { 42 | animation: none; 43 | } 44 | .dkbn-text { 45 | color: #d33c21; 46 | font-weight: bold; 47 | text-shadow: 48 | 0 1px 0 #550b0b, 49 | 0 -1px 0 #550b0b, 50 | 1px 0 0 #550b0b, 51 | -1px 0 0 #550b0b, 52 | 1px 1px 0 #550b0b, 53 | -1px -1px 0 #550b0b; 54 | } 55 | 56 | @keyframes dokaben-up { 57 | 0% { 58 | transform: matrix3d(1,0,0.00,0,0.00,0,1.00,-0.005,0,-1,0,0,0,0,0,1); 59 | } 60 | 100% { 61 | transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1); 62 | } 63 | } 64 | @keyframes dokaben-down { 65 | 0% { 66 | transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1); 67 | } 68 | 100% { 69 | transform: matrix3d(1,0,0.00,0,0.00,0,1.00,-0.005,0,-1,0,0,0,0,0,1); 70 | } 71 | } 72 | @keyframes dokaben-loop { 73 | 0% { 74 | transform: matrix3d(1,0,0.00,0,0.00,0,1.00,-0.005,0,-1,0,0,0,0,0,1); 75 | } 76 | 50% { 77 | transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1); 78 | } 79 | 100% { 80 | transform: matrix3d(1,0,0.00,0,0.00,0,1.00,-0.005,0,-1,0,0,0,0,0,1); 81 | } 82 | } 83 | @keyframes dokaben-loop2 { 84 | 0% { 85 | transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1); 86 | } 87 | 50% { 88 | transform: matrix3d(1,0,0.00,0,0.00,0,1.00,-0.005,0,-1,0,0,0,0,0,1); 89 | } 90 | 100% { 91 | transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1); 92 | } 93 | } 94 | --------------------------------------------------------------------------------