CSSで画像を上下に動かしたものの一部分を表示させる

1枚のイラストを、カメラを上に移動させたようなアニメーションを作りたいのですが
web上で動けば何でもかまいません。
GIFアニメにしようと思ったのですが1枚1枚作るのは今時古いかなーと思って自動生成できるソフトを探したのですが見つからず、
そもそも画像を作るのが古いんじゃないかと思いまして、
多分CSSとかjavascriptでできるんだろうな、と思ったはいいものの
まったく門外漢で、検索しようにもフワフワ動いたりするものしか見つからず
疲れてしまって、聞いた方が早いな・・・と思ったので質問させて頂きます。
1枚のイラスト(例えば200x200px)を100x100pxの画像にして
下から上にカメラが上がっていくようにアニメーションにするにはどうしたらいいのでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じでいかがでしょうか?

HTML
1<div class="parent">
2  <img class="child" src="xxxx/xxxx/画像.jpg" alt="">
3</div>

CSS
1.parent {
2  overflow: hidden; /* はみ出た子要素は隠す。不要かもしれません。 */
3  
4  width: 100px;
5  height: 100px;
6}
7.child {
8  /* 「aaaaaa」は好きな名前にしてください */
9  animation: aaaaaa 5s ease 0s 1;
10
11  display: block; /* 画像はinlineでなくblockのほうが便利 */
12
13  width: 200px;
14  height: 200px;
15}
16
17/* 「aaaaaa」は好きな名前にしてください */
18@keyframes aaaaaa {
19  0% {
20    transform: translate(0, 100px); /* 100pxは好きな数字を指定してください。アニメーション開始時の座標です。 */
21  }
22  100% {
23    transform: translate(0, -100px); /* -100pxは好きな数字を指定してください。アニメーション終了時の座標です。 */
24  }
25}