😆

初めてcss.アニメーションを作ってみる 前編

2022/05/13に公開約2,600字

初めてcss.アニメーションを作ってみる 前編

途中経過 

https://www.youtube.com/watch?v=7b-Pc2FZs-Q

全体像

全体の流れとしてはclass に animationを指定
そして@keyframesで動きを指定

以下はanimationをを主に構成している要素。(今回の例は全て初期値)

animation-name: 自分で名前を指定; 
animation-duration: 0s; 一回のアニメーションにかかる時間  
animation-timing-function: ease; アニメーションの速度
animation-delay: 0s; アニメーションが何秒後に開始するか
animation-iteration-count: 1; アニメーションの回数 or ループ指定
animation-direction: normal; 再生する方向
animation-fill-mode: none; 実行前・実行後の状態
animation-play-state:running 再生の指定

上から順に優先度が高い 
全部まとめて書くときは以下の通り

    class名 {
animation: 名前 0s ease 0s 1;
}

上記みたいに全ての要素をしていせず、省略することもできる(その場合初期値が適用される)
ただし
animation-suration と animation-delayのように
指定する値が被っていると上の方から適応されるため、
初期値を指定したい時でも入力する必要あり。

ここまではアニメーションの骨組み。下記のからはアニメーションの具体的な動きを指定する

(今回は画像が回るものを作って見た 一番上のやつ)
@keyframees アニメーション名 を指定
@-webkit-keyframes アニメーション名 を指定

@keyframes right-spin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}```
上の方が優先度は高い。
しかし下記のものを忘れてしまうと
ループしたい時にできなくなってしまう。
なぜこのようなことが起きるのかは不明である

```css
@-webkit-keyframes right-spin {
  0% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

ここから先 ものすごく重要!!!!!!

今回作ったのは回るアニメーションだが私が最初に書いたコード(下記のコード)
ではおもった通りにはならなかった。
中央で回らせることは成功。しかし左右に持ってこようとすると......


<link rel="stylesheet" href="./animation.css" />
<div class="wrapper">
  <div class="karada">
    <div class="karada-image">
      <img src="./image/WTshirt_man.png" />
    </div>
  </div>
</div>

.karada {
  width: 100%;
  text-align: right;   /*<-text-alignを変える*/
  /*もしくは margin,paddingなどでは*/
  height: 680px;
}

.karada-image > img {
  display: inline-block;
  margin: 20px;
}


.karada-image {
  animation: karada-spin 1s linear 1s infinite;
  -webkit-animation: right-spin 1s linear 1s infinite;
}

@keyframes karada-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes karada-spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

左に持っていきたい!!!!
のに
理想(最初)
現実(最後)

https://youtu.be/51ZRKjbiJfA

解決策は.....

widthをいじること
左に寄せたい場合は50%とかにすればひだりになるよ!!!
右???しらねえよ

まだまだ続きます.........

補足
まじめに解説すると、paddingとかだと写真の位置のみがずれてしまうので
そこを中心に今回の場合は回ってしまう。
なのでwidthで中心ごと右or左によせれば解決。

一番上のやつはwidthを50%ずつにして、
display:flex と言うものを使って左右に展開させている。

以下 参考にさせてもらったサイト

animation,transition関係

https://www.otwo.jp/blog/css_animation/#con2-1
transition,flex(中編で使います)
https://mugenweb-note.com/web/css/keyframes-sample
flex(なお自分でやって見た方がわかりやすい)
https://web改善事例.com/wp/css-basis-flex/

Discussion

ログインするとコメントできます