jQueryのhover()を用いて要素にズーム効果をつける時に効果に指定する時間について

前提・実現したいこと

WebサイトにjQueryを適用して装飾しています。

jQuery のhover()、addClass()、removeClass()とCSSを用いて画像にマウスカーソルを乗せた時にその画像が拡大し、外すと元のサイズに戻る効果をつけました。

初期サイズから拡大サイズになるまでの所要時間、そして拡大サイズから初期サイズに戻るまでの所要時間はCSSのtransitionを用いて指定することができるかと思いますが、この時、

transitionを指定をしなくてもある程度（約transition: .3s;相当）なめらかに拡大・縮小が行われるのはなぜなのでしょうか？

また、
2. CSSで拡大用のセレクタに対してtransitionを定義すると初期サイズから拡大サイズになるまでの所要時間のみを指定することになるかと思いますが、初期サイズ用のセレクタに対してtransitionを定義した場合、拡大サイズから初期サイズに戻るまでの所要時間が指定されるのは理解できるのですが、同時に初期サイズから拡大サイズになるまでの所要時間も指定されることになるのはなぜなのでしょうか？

該当のHTMLソースコード

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <link rel="stylesheet" href="stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body>
    <!--効果を付ける画像-->
    <div class="column-image" style="background-image: url(https://image.jpg)"></div>
      
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

該当のCSSソースコード

.column-image {
  width: 100%;
  height: 277px;
  background-position: center;
  background-size: 100% auto;
  transition: all .5s; /* 初期サイズ->拡大サイズ, 拡大サイズ->初期サイズの所要時間 */
}

.column-image.zoom {
  background-size: 120% auto;
  /* .column-image {transition: all .5s;}を削除し、下記を定義した場合は初期サイズ->拡大サイズの所要時間のみが指定される */
  /*transition: all .5s;*/ 
}

/* 上記コードで初期サイズ->拡大サイズの所要時間も定義されるのはなぜでしょうか？ */

該当のjQueryソースコード

$(function() {
  $(".column-image").hover(
    function() {
      $(this).addClass("zoom");
    },
    function() {
      $(this).removeClass("zoom");
    }
  );
});

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

回答2件

何をおっしゃっているのかがよく判りませんが, CSSのtranstionプロパティは「指定したプロパティの値を監視し, 変更が有った際のスタイルへの適用をアニメーション化する」効果を持ちます.

従って,

CSS
1.column-image {
2  background-size: 100% auto;
3  transition: all .5s;
4}
5
6.column-image.zoom {
7  background-size: 120% auto;
8}

の場合, .column-imageにマッチするノードでは, .zoomクラスの有無に関わらず何れかのプロパティ値に変更が有った際に, スタイルの適用を0.5秒かけて徐々に行うことになります. つまり, ズームの適用時にもズームの解除時にもアニメーションが有効となります.

一方,

CSS
1.column-image {
2  background-size: 100% auto;
3}
4
5.column-image.zoom {
6  background-size: 120% auto;
7  transition: all .5s;
8}

のように記述しますと, .zoomクラスが有った場合に限りスタイルの適用を0.5秒かけて徐々に行うことになるため, .zoomクラスを外すとtransitionの設定がなくなりますから, 瞬時に変更後(つまりズーム解除時)のスタイルが適用されることになります.

投稿2018/04/11 11:41

defghi1977

総合スコア4756

どのあたりが疑問かが読み取れなかったので、とりあえずいろいろパターンを試してみてはいかがでしょうか。

HTML
1<div class="aaa">aaa</div>
2<div class="bbb">bbb</div>
3<div class="ccc">ccc</div>

CSS
1.aaa {
2  transition: all .3s ease .5s;
3}
4.aaa:hover {
5  transition: all 3s ease 0s;
6  font-size: 10em;
7}
8.bbb {
9  transition: all .1s ease 0s;
10}
11.bbb:hover {
12  font-size: 10em;
13}
14.ccc {
15}
16.ccc:hover {
17  transition: all 3s ease 0s;
18  font-size: 10em;
19}
20
21```**動くサンプル：**[https://jsfiddle.net/aa4so3nb/](https://jsfiddle.net/aa4so3nb/)