Animation

動きのあるページ

練習用ファイルダウンロード


01　ふわふわ浮かぶ

Animation／CSS Animation (keyframe)

CSS

.fuwafuwa {
animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
background: url(img/choucho.png) no-repeat center center / 70px auto;
display: inline-block;
transition: 1.5s ease-in-out;
width: 70px;
height: 70px;
margin-top: 15px;
}

@keyframes fuwafuwa {
0% {
transform:translate(0, 0) rotate(-7deg);
}
50% {
transform:translate(0, -7px) rotate(0deg);
}
100% {
transform:translate(0, 0) rotate(7deg);
}
}

HTML

<div class="fuwafuwa"></div>


02　ぷるぷる揺れる

Animation／CSS Animation (keyframe)

CSS

.shake{
animation: shake .1s linear infinite;
width:130px;
height:75px;
background:#0091EA;
background: url("img/kemusi.png");
margin:20px;
}

@keyframes shake {
0% {
transform: translateX(0);
}

40% {
transform: translateX(-3%);
}

80% {
transform: translateX(3%);
}

100% {
transform: translateX(0);
}
}


translateX　→　translateY　たてに揺れる

HTML

<div class="shake"></div>


03　のび～るBOX

Animation／CSS Transition

マウスオーバーで長くなるよ～！

CSS

.box1 {
width:100px;
height:80px;
background:cornflowerblue;
transition-property:background,width;
transition-duration:2s;
transition-timing-function:ease-in-out;
padding: 20px;
}
.box1:hover{
width:400px;
background:#cd5c5c;
}

HTML

<div class="box1">
テキストを入れる
</div>


04　色が変わるBOX

Animation／CSS Animation (keyframe)

ボックスのBackground Color が変わるアニメーション

animation-name: アニメーションの名前;
animation-duration: 秒数;
animation-iteration-count: infinite;←連続させない場合は入れない

@keyframes アニメーションの名前

CSS

.box2 {
padding: 20px;
margin: 20px 0;
background-color: pink;
border-radius: 15px;
animation-name: box-color;
animation-duration: 10s;
animation-iteration-count: infinite;
}

@keyframes box-color {
0% {
background-color: skyblue;
}
25% {
background-color: plum;
}
50% {
background-color:greenyellow;
}
75% {
background-color:lightgreen;
}
100% {
background-color: pink;
}
}

HTML

<div class="box2">
<p>画像やテキストを入れる</p>
</div>


05　画像やテキストが下から出る

Animation／jQuery
写真やテキストをスクロール時に「ふわっ」と表示させる方法
jQueryを使うのでmain.jsのリンクを</body>の上に入れておきます

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>の上にコピペ

テキストや画像

CSS

.content {
opacity: 0;
transform: translate(0, 100px);
transition: all 1.5s;
}

.content.visible {
opacity: 1;
transform: translate(0, 0);
}

HTML

<section class="content">
<p class="center-t">テキストや画像</p>
<p class="center-t"><img src="img/ph1.jpg" alt=""/></p>
</section>

06　CSSだけで出来る　ページをフワッと表示

Animation／CSS
これはCSSへコピー・ペーストするだけで使えるのでとても簡単！

CSS

body {
-webkit-animation: fadeIn 1.8s ease 0s 1 normal;
animation: fadeIn 1.8s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {
opacity: 0
}

100% {
opacity: 1
}
}

@-webkit-keyframes fadeIn {
0% {
opacity: 0
}

100% {
opacity: 1
}
}