シンプルなカウントアップアニメーションが、CSSのみでできることを知り驚きました。
@propertyについてはこちら↓
目次
サンプルとコード
今回関係のあるコードです↓
@property --count {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
.countUp {
counter-set: countUp var(--count);
animation: countUp 3s 1;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
font-variant-numeric: tabular-nums;
font-size: 3rem;
}
.countUp::after {
content: counter(countUp) "件";
}
@keyframes countUp {
100% {
--count: 100;
}
}
@propertyでカスタムプロパティを登録しない場合、値が0から100にすぐ切り替わります↓
![](https://yuito-blog.com/wp-content/uploads/2023/09/Sep-22-2023-20-59-48.gif)
注意点として、小数点や「1,000」のようにカンマ区切りのあるカウントアップアニメーションはできません。シンプルなカウントアップアニメーションの場合、CSSのみで可能です。
参考サイト
Qiita
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTQwcHJvcGVydHklRTMlODIlOTIlRTclOTQlQTglRTMlODElODQlRTMlODElQTZDU1MlRTMlODIlQTIlRTMlODMlOEIlRTMlODMlQTElRTMlODMlQkMlRTMlODIlQjclRTMlODMlQTclRTMlODMlQjMlRTMlODIlOTIlRTQlQkQlOUMlRTYlODglOTAlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTY3ODQ2M2I3ZThhZDZjYzg4NmUyMjExYWI3OTFlMWIw&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBLb2tpU2FrYW5vJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNDZlODU4YzFjODBlZjk2MzgyMTNkMGZlY2UwYjkxOQ&blend-x=142&blend-y=486&blend-mode=normal&s=d02eaa113616e3c40565d30e35a70bf7)
@propertyを用いてCSSアニメーションを作成する – Qiita
はじめにこの記事では@propertyを用いたアニメーションの作り方を紹介します。これを利用することで、JavaScriptを用いて構築せざるを得なかった多くのアニメーションをCSS…
Qiita
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU2JTk1JUIwJUU1JUFEJTk3JUUzJTgxJUFFJUUzJTgyJUFCJUUzJTgyJUE2JUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgyJUEyJUUzJTgzJTgzJUUzJTgzJTk3JUUzJTgyJTkyJUU4JTg5JUFGJUUzJTgxJTg0JUU2JTg0JTlGJUUzJTgxJTk4JUUzJTgxJUFFJUUzJTgyJUEyJUUzJTgzJThCJUUzJTgzJUExJUUzJTgzJUJDJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJUUzJTgxJUE3JUU1JUFFJTlGJUU4JUEzJTg1JUUzJTgxJTk3JUUzJTgxJTlGJUUzJTgxJTg0JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0xN2M2NTQyNjI4ZjIyY2JjNzU2ODlhN2E5Mjc0ZjA5OA&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBuaXNoaW5vc2hha2UmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTNhZThmMmY3NGNmZGE0ZjA5OGIzOTFkYmUyZDNlMzIw&blend-x=142&blend-y=486&blend-mode=normal&s=729f0a7dfa3df2892e959c839c0be103)
数字のカウントアップを良い感じのアニメーションで実装したい – Qiita
インフォグラフィックなどで、数字をカウントアップしたくなったときに役に立つかもしれないメモです。↓こんな感じにしたい。サンプルに使っている共通のHTML<div class…