html10行、js no need、css (と画像少し) だけでこんなことができるコレクション

## 動機

[Webフロントエンド開発で役立つサービスまとめ#Codepen](https://qiita.com/Tsuyoshi84/items/ce2b664cdf5776970fbe#codepen)
および [CSS Art Resources](https://dev.to/_tdenise/css-art-resources-206m)を読んだ。Codepenは、

> HTML、CSS、JavaScriptによるコード実行環境を提供するサービスです。このサービスの特徴の1として、CSSの作品がアートワークのように多く投稿されており、世界中のCSS職人による素晴らしいギャラリーを堪能することができます。その技術はもはや 
変態
 職人の域に達しているものが多く、より高いレベルのCSSを組みたい場合に勉強になるでしょう。

というもの。そんなCodepen の https://codepen.io/tag/css-animation から、
[CSSだけでできるあんなことこんなこと](https://qiita.com/rana_kualu/items/43e8841a4fccb8a80113) に倣い、Html10行、js no need, cssだけでこんなことができるんだ、すっげー、という私の眼力だけで選出した。役に立つかは知らない。紹介文にも語彙力はない。でも百聞は一見にしかず。



## 1. [CSS mouse-out transition effect](https://codepen.io/argyleink/pen/poEjvpd)

まずはシンプルにホバーミー。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="argyleink" data-slug-hash="poEjvpd" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS mouse-out transition effect">
  <span>See the Pen <a href="https://codepen.io/argyleink/pen/poEjvpd">
  CSS mouse-out transition effect</a> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 2. [Heartbeat CSS](https://codepen.io/emabytes/pen/ZEGMQXo)

ドキドキ心拍。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="emabytes" data-slug-hash="ZEGMQXo" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Heartbeat CSS">
  <span>See the Pen <a href="https://codepen.io/emabytes/pen/ZEGMQXo">
  Heartbeat CSS</a> by Ema (<a href="https://codepen.io/emabytes">@emabytes</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 3. [NeonSign](https://codepen.io/takaharatoru/pen/LYEjyMw)

ネオンサイン。これは [CSSだけで幻想的な光を放つニキシー管を作れるのか？](https://qiita.com/interimadd/items/9b09719047a145971406) でも応用されていてこちらもキレイ。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="takaharatoru" data-slug-hash="LYEjyMw" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="NeonSign">
  <span>See the Pen <a href="https://codepen.io/takaharatoru/pen/LYEjyMw">
  NeonSign</a> by takaharatoru (<a href="https://codepen.io/takaharatoru">@takaharatoru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 4. [Button-animation in pure css](https://codepen.io/ps173/pen/pobNeYK)

ボタンも負けちゃいねえ。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="ps173" data-slug-hash="pobNeYK" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Button-animation in pure css">
  <span>See the Pen <a href="https://codepen.io/ps173/pen/pobNeYK">
  Button-animation in pure css</a> by Pratham (<a href="https://codepen.io/ps173">@ps173</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 5. [CSS BUTTON-NEON SHADOW WITH ANIMATION](https://codepen.io/ps173/pen/MWepJBw)

こちらもボタン。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="ps173" data-slug-hash="MWepJBw" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS BUTTON-NEON SHADOW WITH ANIMATION">
  <span>See the Pen <a href="https://codepen.io/ps173/pen/MWepJBw">
  CSS BUTTON-NEON SHADOW WITH ANIMATION</a> by Pratham (<a href="https://codepen.io/ps173">@ps173</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 6. [Creative Button Animation Effect CSS Snake Border Animation](https://codepen.io/aashu11267/pen/dyYrKwM)

更にエフェクト付きボタン。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="aashu11267" data-slug-hash="dyYrKwM" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Creative Button Animation Effect CSS Snake Border Animation">
  <span>See the Pen <a href="https://codepen.io/aashu11267/pen/dyYrKwM">
  Creative Button Animation Effect CSS Snake Border Animation</a> by Aashutosh Prajapati (<a href="https://codepen.io/aashu11267">@aashu11267</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 7. [Sliding Squares](https://codepen.io/tomad8/pen/VwaPOXR)

正方形がニュルニュル。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="tomad8" data-slug-hash="VwaPOXR" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Sliding Squares">
  <span>See the Pen <a href="https://codepen.io/tomad8/pen/VwaPOXR">
  Sliding Squares</a> by Tom Adey (<a href="https://codepen.io/tomad8">@tomad8</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 8. [Nested Boxes](https://codepen.io/arron21/pen/abNRmVP)

ネストされたBoxがカッコイイ。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="arron21" data-slug-hash="abNRmVP" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Nested Boxes">
  <span>See the Pen <a href="https://codepen.io/arron21/pen/abNRmVP">
  Nested Boxes</a> by ARRON MCCRORY (<a href="https://codepen.io/arron21">@arron21</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 9. [Breaking News!](https://codepen.io/natec425/pen/bJmzMP)

速報。ちょっとビックリする。
<p class="codepen" data-height="465" data-theme-id="light" data-default-tab="css,result" data-user="natec425" data-slug-hash="bJmzMP" style="height: 465px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Breaking News!">
  <span>See the Pen <a href="https://codepen.io/natec425/pen/bJmzMP">
  Breaking News!</a> by nate clark (<a href="https://codepen.io/natec425">@natec425</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 10. [Typewriter effect intro (pure CSS, no JS)](https://codepen.io/dianalis/pen/jOWaOqZ)
タイプライター風エフェクト。もちろん no js。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="dianalis" data-slug-hash="jOWaOqZ" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Typewriter effect intro (pure CSS, no JS)">
  <span>See the Pen <a href="https://codepen.io/dianalis/pen/jOWaOqZ">
  Typewriter effect intro (pure CSS, no JS)</a> by Diana (<a href="https://codepen.io/dianalis">@dianalis</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 11. [CSS Wave Loading & Loading Bar](https://codepen.io/tarikbilla/pen/OJyObXE)
色を変えてみても良さそう。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="tarikbilla" data-slug-hash="OJyObXE" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Wave Loading &amp;amp; Loading Bar">
  <span>See the Pen <a href="https://codepen.io/tarikbilla/pen/OJyObXE">
  CSS Wave Loading &amp; Loading Bar</a> by Tarik Billa (<a href="https://codepen.io/tarikbilla">@tarikbilla</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 12.[Moving text - Animating keyframes](https://codepen.io/bsmaria/pen/GRoQddM)

テキストが動き回るーー。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="bsmaria" data-slug-hash="GRoQddM" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Moving text - Animating keyframes">
  <span>See the Pen <a href="https://codepen.io/bsmaria/pen/GRoQddM">
  Moving text - Animating keyframes</a> by Maria Briceño (<a href="https://codepen.io/bsmaria">@bsmaria</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 13. [CSS Particles](https://codepen.io/Paolo-Duzioni/pen/MQmbJo)
ビールの泡みたい。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="Paolo-Duzioni" data-slug-hash="MQmbJo" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Particles">
  <span>See the Pen <a href="https://codepen.io/Paolo-Duzioni/pen/MQmbJo">
  CSS Particles</a> by Paolo Duzioni (<a href="https://codepen.io/Paolo-Duzioni">@Paolo-Duzioni</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 14. [Pulse Keyframe Sample](https://codepen.io/version1/pen/yLYWeeL)

ドックンドックン鼓動が見える。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="version1" data-slug-hash="yLYWeeL" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Pulse Keyframe Sample">
  <span>See the Pen <a href="https://codepen.io/version1/pen/yLYWeeL">
  Pulse Keyframe Sample</a> by jiro (<a href="https://codepen.io/version1">@version1</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 15. [Text Glitch Effect](https://codepen.io/mariiinda/pen/vYNqoNm)

なんだこれ。。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="mariiinda" data-slug-hash="vYNqoNm" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Text Glitch Effect">
  <span>See the Pen <a href="https://codepen.io/mariiinda/pen/vYNqoNm">
  Text Glitch Effect</a> by marinda (<a href="https://codepen.io/mariiinda">@mariiinda</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 16. [Grace Hopper](https://codepen.io/triciaakatz/pen/eEyYNP)

グレースホッパーおばちゃん。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="triciaakatz" data-slug-hash="eEyYNP" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Single Div Grace Hopper">
  <span>See the Pen <a href="https://codepen.io/triciaakatz/pen/eEyYNP">
  Single Div Grace Hopper</a> by Tricia Katz (<a href="https://codepen.io/triciaakatz">@triciaakatz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 17. [Planet Animation](https://codepen.io/artyom-ivanov/pen/QjOYbO)
しんがり、地球ではないなにかの惑星。

<p class="codepen" data-height="365" data-theme-id="light" data-default-tab="css,result" data-user="artyom-ivanov" data-slug-hash="QjOYbO" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Planet Animation (Only css)">
  <span>See the Pen <a href="https://codepen.io/artyom-ivanov/pen/QjOYbO">
  Planet Animation (Only css)</a> by Artyom (<a href="https://codepen.io/artyom-ivanov">@artyom-ivanov</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## おまけ

安定の[鏡餅](https://qiita.com/7note/items/34217d2b926efa32bf40)、
[HTML・CSS開発で困った時に役に立つ記事、100本まとめ](https://qiita.com/7note/items/4fd0b55ede2ea0acb010) がシンプルに楽しい。バックエンドの保守対応をしていると目の保養をしたくなります...

### 追記


変態的 
 CoolなCSS Loaders たちを公開している記事を発見したのでここに追記。

[I made 100 CSS loaders for your next project - DEV Community 👩‍💻👨‍💻](https://dev.to/afif/i-made-100-css-loaders-for-your-next-project-4eje)
[Another 100 CSS loaders for your next project - DEV Community 👩‍💻👨‍💻](https://dev.to/afif/another-100-css-loaders-for-your-next-project-352l)
[I made 100 more CSS loaders for your next project - DEV Community 👩‍💻👨‍💻](https://dev.to/afif/i-made-100-more-css-loaders-for-your-next-project-4ioa)
[Still 100 CSS loaders for your next project](https://dev.to/afif/still-100-css-loaders-for-your-next-project-57hp)
[Adding 100 CSS loaders to the collection of — 500 CSS loaders 🏆 - DEV Community 👩‍💻👨‍💻](https://dev.to/afif/adding-100-css-loaders-to-the-collection-of-500-css-loaders-2a3p)

<p class="codepen" data-height="565" data-theme-id="light" data-default-tab="result" data-user="t_afif" data-slug-hash="bGqEBgL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="The progress">
  <span>See the Pen <a href="https://codepen.io/t_afif/pen/bGqEBgL">
  The progress</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGWbxVG" data-user="t_afif" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/t_afif/pen/bGWbxVG">
  Full Screen #10</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



以上、楽しんで頂けたらさいわいです。