CSSでつくるアニメーションまとめVol1 | BLOG

CSS

近年、CSSでリッチコンテンツを制作することが多くなりました。そこで、テキストやブロックアニメのまとめをメモします。

javascriptを設定する

CSSだけでアニメーションを作成する事も可能ですが、jsプラグインを使用するとバリエーションがひろがるので、設定します。

js

<script src="js/jquery-3.3.1.min.js"></script>
<script>
(function ($) {


$(function(){

$(window).scroll(function (){
var animTrigger = $('.anim');
$(animTrigger).each(function(){
var scroll = $(window).scrollTop(),
elemTop = $(this).offset().top,
windowHeight = $(window).height();

if (scroll > elemTop - windowHeight + 200){
$(this).addClass('js-animated');
}
});
});
$(window).trigger('scroll');

});

var anim = function() {
if(($target).hasClass('js-animated')){
$target.removeClass('js-animated');
setTimeout(anim, 1000)
} else {
$target.addClass('js-animated');
setTimeout(anim, 3000)
}
}
anim();

var anim2 = function() {
if(($target2).hasClass('js-animated')){
$target2.removeClass('js-animated');
setTimeout(anim2, 1000)
} else {
$target2.addClass('js-animated');
setTimeout(anim2, 4000)
}
}
anim2();

var anim3 = function() {
if(($target3).hasClass('js-animated')){
$target3.removeClass('js-animated');
setTimeout(anim3, 3000)
} else {
$target3.addClass('js-animated');
setTimeout(anim3, 3000)
}
}
anim3();


})(jQuery);
</script>

テキストアニメーション

各種テキストのアニメーションまとめです。

背景色がスライドするして文字を表示するアニメーション

css

.bg .bg-wrap {
position: relative;
display: inline-block;
margin-top: 5px;
}
.bg.js-animated .bg-wrap::before {
animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
background: linear-gradient(to right, #EB6683 0%,#EBABC5 50%,#F1E100 100%);
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: left center;
}
.bg .bg-wrap .drop {
color: #fff;
display: inline-block;
font-size: 36px;
font-weight: bold;
padding: 5px 15px;
position: relative;
z-index: 1;
}

@keyframes bg {
0% {
opacity: 0;
transform: scaleX(0) translateX(-5%);
}
30% {
transform: scaleX(1) translateX(0);
}
100% {
transform: scaleX(1) translateX(0);
}
30%, 100% {
opacity: 1;
}
}

html

<div class="bg anim">
<span class="bg-wrap"><span class="drop">背景色がスライドするして文字を表示する</span></span><br>
<span class="bg-wrap"><span class="drop">アニメーション</span></span>
</div>

文字が下から出現するアニメーション

css

.matrix .bg-wrap,
.matrix .bg-wrap .drop {
display: block;
}

.matrix .bg-wrap {
overflow: hidden;
opacity: 0;
}

.matrix .bg-wrap + .bg-wrap {
margin-top: 10px;
}

.matrix .bg-wrap .drop.large {
font-size: 36px;
font-weight: bold;
}
.matrix .bg-wrap .drop.small {
font-size: 15px;
}

.matrix .bg-wrap .drop {
opacity: 0;
transform: matrix(1, 0, 0, 1, 0, 100);
transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.matrix.js-animated .bg-wrap {
opacity: 1;
}

.matrix.js-animated .bg-wrap .drop {
opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0);
}

html

<div class="matrix anim">
<span class="bg-wrap"><span class="drop large">文字が下から出現するアニメーション</span></span>
<span class="bg-wrap"><span class="drop small">ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。ダミーです。</span></span>
</div>

背景色が消えてから文字を表示する

css

.mask-over {
color: transparent;
display: inline-block;
font-size: 36px;
font-weight: bold;
overflow: hidden;
position: relative;
transition: color 0ms 450ms;
}
.mask-over::after {
background: linear-gradient(to right, #EB6683 0%,#EBABC5 50%,#F1E100 100%);
bottom: 0;
content: '';
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: translate(0, 100%);
}

.mask-over.js-animated {
color: #000;
}
.mask-over.js-animated::after {
animation: mask-over 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}

@keyframes mask-over {
0% {
transform: translate(0, 101%)
}
40%, 60% {
transform: translate(0, 0%)
}
100% {
transform: translate(0, -100%)
}
}

html

<div class="mask-over anim">
背景色が消えてから文字を表示する
</div>

線が伸びる

css

.line-bottom {
display: block;
position: relative;
margin-top: 20px;
}
.line-bottom::after {
background: linear-gradient(to right, #EB6683 0%,#EBABC5 50%,#F1E100 100%);
content: '';
display: block;
height: 1px;
width: 0;
transform: translateX(-50%);
transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
position: absolute;
bottom: 0;
left: 50%;
}
.line-bottom.js-animated::after {
width: 100%;
}

html

<h4>線が伸びる</h4>
<div class="line-bottom anim"></div>

デモはこちら

ブロックアニメーション

各種ブロックのアニメーションまとめです。

フェードイン

css

.anim-block.fadein.js-animated {
animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

html

<div class="anim-block fadein anim"></div>

フェードアップ

css

.anim-block.fadeup.js-animated {
animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeup {
0% {
transform: translateY(30px);
opacity: 0;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(0);
}
}

html

<div class="anim-block fadeup anim"></div>

スライドイン

css

.anim-block.slidein.js-animated {
animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

html

<div class="anim-block slidein anim"></div>

ズームイン

css

.anim-block.zoomin.js-animated {
animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes zoomIn {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
opacity: 1;
transform: scale(1);
}
}

html

<div class="anim-block zoomin anim"></div>

バウンド

css

.anim-block.bound.js-animated {
animation: bound 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

@keyframes bound {
0% {
transform: translateX(140px);
opacity: 0;
}
50% {
transform: translateX(0);
}
65% {
transform: translateX(30px);
}
100% {
transform: translateX(0);
}
20%,100% {
opacity: 1;
}
}

html

<div class="anim-block bound anim"></div>

収縮

css

.anim-block.shrinkage.js-animated {
animation: shrinkage 1s ease-in-out 1 forwards;
}

@keyframes shrinkage {
0% {
transform: scale(1.0, 1.0) translate(0, 0);
}
15% {
transform: scale(0.98, 0.9) translate(0, 5px);
}
30% {
transform: scale(1.02, 1.0) translate(0, 8px);
}
50% {transform: scale(0.98, 1.05) translate(0, -8px);
}
70% {
transform: scale(1.0, 0.9) translate(0, 5px);
}
100% {
transform: scale(1.0, 1.0) translate(0, 0);
}
0%, 100% {
opacity: 1;
}
}

html

<div class="anim-block shrinkage anim"></div>

左右が揺れる（無限）

css

.anim-block.shake {
animation: shake 2.5s infinite;
opacity: 1;
}
@keyframes shake {
0%, 40% {
transform: skew(0deg, 0deg);
}
5% {
transform: skew(5deg, 5deg);
}
10% {
transform: skew(-4deg, -4deg);
}
15% {
transform: skew(3deg, 3deg);
}
20% {
transform: skew(-2deg, -2deg);
}
25% {
transform: skew(1deg, 1deg);
}
30% {
transform: skew(-0.6deg, -0.6deg);
}
35% {
transform: skew(0.3deg, 0.3deg);
}
}

html

<div class="anim-block shake"></div>

ななめから出てくる

css

.anim-block.licking.js-animated {
animation: licking 0.4s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes licking {
0% {
transform: translate(180px,30px);
opacity: 0;
}
100% {
transform: translate(0,0);
}
20%,100% {
opacity: 1;
}
}

html

<div class="anim-block licking anim"></div>

ポップアップ

css

.anim-block.popup.js-animated {
animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

@keyframes popup {
0% {
transform: translateY(40px) scale(0.8);
opacity: 0;
}
100% {
transform: translateY(0) scale(1.0);
}
80%, 100% {
opacity: 1;
}
}

html

<div class="anim-block popup anim"></div>

収縮（無限）

css

.anim-block.shrinkage-roop {
animation: shrinkage-roop 2s ease-out infinite;
opacity: 1;
}
@keyframes shrinkage-roop {
0%, 40%, 60%, 80% {
transform: scale(1.0);
}
50%, 70% {
transform: scale(0.95);
}
}

html

<div class="anim-block shrinkage-roop anim"></div>

ストロークアニメ

css

.stroke {
background: linear-gradient(to right, #EB6683 0%,#EBABC5 50%,#F1E100 100%);
width: 100%;
height: 150px;
position: relative;
border-radius:10px;
display: flex;
justify-content: center;
align-items: center;
}

.stroke .border {
content: "";
position: absolute;
opacity: 0;
}
.stroke .border.top,
.stroke .border.bottom {
width: calc(100% - 20px);
}
.stroke .border.top {
border-top: 3px solid #30ABE3;
right: 0;
top: 0;
}
.stroke .border.bottom {
border-bottom: 3px solid #30ABE3;
left: 0;
bottom: 0;
}

.stroke .border.right,
.stroke .border.left {
height: calc(100% - 20px);
}
.stroke .border.right {
border-right: 3px solid #30ABE3;
right: 0;
top: 0;
}
.stroke .border.left {
border-left: 3px solid #30ABE3;
left: 0;
bottom: 0;
}

.stroke.js-animated .border {
opacity: 1;
}

.stroke.js-animated .border.top,
.stroke.js-animated .border.bottom {
animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stroke.js-animated .border.right,
.stroke.js-animated .border.left {
animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes stroke-width {
0% {
width: 0;
opacity: 1;
}
100% {
width: calc(100% - 20px);
opacity: 1;
}
}

@keyframes stroke-height {
0% {
height: 0;
opacity: 1;
}
100% {
height: calc(100% - 20px);
opacity: 1;
}
}

html

<div class="stroke anim">
<h3>ストロークアニメ</h3>
<div class="border top"></div>
<div class="border right"></div>
<div class="border bottom"></div>
<div class="border left"></div>
</div>

デモはこちら

ホバーアニメーション

ホバーアニメーションをついでに一つ

css

.anim-block.hover-anime {
opacity: 1;
overflow: hidden;
position: relative;
cursor: pointer;
}
.anim-block.hover-anime::before {
background-color: #fff;
content: "";
display: block;
position: absolute;
top: -100px;
left: 0;
width: 30px;
height: 100%;
opacity: 0;
transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.anim-block.hover-anime:hover::before {
animation: hover-anime 0.5s linear 1;
}

@keyframes hover-anime {
0% {
transform: scale(2) rotate(45deg);
opacity: 0;
}
20% {
transform: scale(20) rotate(45deg);
opacity: 0.6;
}
40% {
transform: scale(30) rotate(45deg);
opacity: 0.4;
}
80% {
transform: scale(45) rotate(45deg);
opacity: 0.2;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}

html

<div class="anim-block hover-anime"></div>

デモはこちら

以上です。
今後もアップデートしていきます。

Spread the love

BLOG

Article

javascriptを設定する

js

テキストアニメーション

css

html

文字が下から出現するアニメーション

css

html

背景色が消えてから文字を表示する

css

html

線が伸びる

css

html

ブロックアニメーション

フェードイン

css

html

フェードアップ

css

html

スライドイン

css

html

ズームイン

css

html

バウンド

css

html

収縮

css

html

左右が揺れる（無限）

css

html

ななめから出てくる

css

html

ポップアップ

css

html

収縮（無限）

css

html

ストロークアニメ

css

html

ホバーアニメーション

css

html

Related article