1

animationで説明文章の背景画像だけ大きくしたいですが、できません
説明にだけ1.1の逆数を掛けましたがこれでもうまく動きません

簡単にできると思ったんですが、できず、助けてください(T_T)
できればJavascriptは使わずに済ませたいです

.container-panel {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.panel-desc {
  background: url(background_hero.jpg);
  background-size: cover;
  width: 100%;
  height: 100%;
  animation: zoom 3s;
}

.desc {
  animation: nozoom;
}

@keyframes zoom {
  100% {
    transform: scale(1.1, 1.1)
  }
}

@keyframes nozoom {
  100% {
    transform: scale(0.9, 0.9);
  }
}
<div class="container-panel">
  <div class="panel-desc">
    <div class="desc">画像の説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</div>
  </div>
</div>

1 件の回答 1

3

こんな感じですか?

.container-panel {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.panel-desc {
  background: url(https://cdn.sstatic.net/Sites/ja/Img/sprites.svg?v=d62ac906bcbf);
  background-size: cover;
  width: 100%;
  height: 100%;
  animation: zoom 3s;
}

.desc {
  animation: nozoom;
  position:absolute;
  z-index:1;
}

@keyframes zoom {
  100% {
    transform: scale(1.1, 1.1)
  }
}

@keyframes nozoom {
  100% {
    transform: scale(0.9, 0.9);
  }
}
<div class="container-panel">
    <div class="desc">画像の説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</div>
  <div class="panel-desc">
  </div>
</div>

1
  • 1
    アプローチとしての差はありませんが、 before, after 疑似要素を用いることで文書構造の変更を行わずに目的を達成出来ます ()。
    – supa
    2020年1月16日 17:11

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。