目次
- 1. cssうんちに魂宿してみた
- 2. 内容に応じてサイズが可変する を素敵に実装する
- 3. Node.jsとSocket.ioで簡易的なチャットを実現させる
- 4. 半々人前のフロントエンドエンジニアが成長するために必要だと感じたこと
- 5. head要素と関連ファイル
- 6. HTMLとCSSでカレーライスを作った
- 7. HTMLのtextarea でインデント、アンインデント
- 8. classの小話 （cssが適用されないエラーについて）
- 9. 【Qiita】記事で使える 続きを読む もっと詳しく
- 10. cssだけでうんち書いてみた
- 11. HTMLでGoogleマップを挿入する（２）
- 12. HTMLでのGoogleマップの挿入の仕方
- 13. Sassのmixinを用いたレスポンシブ化
- 14. 僕のP2HACKS譚
- 15. Bootstrap 4 のcardを使ってWebサイトにオシャレなBOXを加える
- 16. 初心者によるプログラミング学習ログ 184日目
- 17. CSSでベルトスクロールゲームを作った。
- 18. 初めてのJavaScript~ペンの色・太さが変更できるお絵かきアプリを作ったよ~
- 19. サイトに某ほとけ風な何かを呼び出すjQueryプラグイン・hotoke.jsを作った
- 20. mediaを使ってNavigation SideMenuを実現する
cssうんちに魂宿してみた
# ?おさらい?
前回cssでうんちを書いたぞ！
[cssだけでうんち書いてみた](https://qiita.com/petapetapeta/items/b8b8675ef6880bed65a3)
今日はこれをよりうんちらしくするべく、魂を宿してみたい！# ?cssでぷる〜んていうアニメーション?
キーフレームを頑張って打て、scale()を変えればできる！“`css
@keyframes jelly {
0% {
transform: scale(1, 1);
}
8% {
transform: scale(1, 1);
}
10% {
transform: scale(1.1, 0.9);
}
13% {
transform: scale(0.9, 1.1);
}
17.5% {
transform: scale(1, 1);
}
19% {
transform: scale(1, 1);
}
58% {
transform: scale(1, 1);
}