

以下のように、css3アニメーションで 1.7秒かけてclass="n1"内の画像を1倍～1.5倍に拡大してフェードアウトで消えるようにしています。  
これに、停止をいれたいのですがうまくいきません。  
class="n1"を1秒停止後、0.7秒かけて「scaleout
」アニメーション（n1内の画像が1倍～1.5倍に拡大する）をしたいのですが、css3または、jQueryでどのようにしたらよいでしょうか。教えてください。

[code]

    ***  html  ***
    <li class="n1"><img src="img/01.jpg" alt=""></li>
    
    
    ***  css  ***
    .n1 {
        position: absolute;
        width: 320px;
        margin: 0 auto;
        text-align: center;
        background: #ccc;
        bottom: 0;
        z-index: 10;
    }
    
    .n1 {
      -webkit-animation: scaleout 1.7s ease-in-out;
      animation: scaleout 1.7s ease-in-out;
    }
    
    /* keyframe 始点から終点の設定 */
    @-webkit-keyframes scaleout {
      0% {
        -webkit-transform: scale(1.0) 
      }
      50% {
        opacity: 1;
      } 
      100% {
        -webkit-transform: scale(1.5);
        opacity: 0;
      }
    }
    
    @keyframes scaleout {
      0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    
      50% {
        opacity: 1;
      } 
     100% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
      }
    }
    
[/code]


CC BY-SA 3.0
2015-05-30T13:39:46.563
10800
2015-05-31T01:51:39.580
8745
question
javascript jquery css
css3又はjQueryで1秒停止後再びアニメーションが続くようにしたい


`transition-delay` (遅延)を使いましょう。`transition` でいうと第4パラメータです。

以下の例では、画像にマウスを重ねるとアニメーションを開始します(マウスを画像から外すと元に戻る)。scaleoutに相当する `transform`
へのアニメーションは、1秒の遅延後に0.7秒かけて適用しているので、正味1.7秒です。画像を消すための `opacicty`
へのアニメーションは、1.7秒の遅延後に0秒で適用するので、先のscaleout終了後に消えるような効果になっています。

余談ですが、opacittyの適用時間を長くすればフワッと消える感じになります。また、消した後は、同様の考え方で `display` や
`visibility` プロパティも変更したほうが良いかもしれません。

[code]

    .n1:hover {
      transform: scale(1.5);
      opacity: 0;
      transition:
        transform 0.7s ease-in-out 1.0s,
        opacity 0s ease 1.7s;
    }
[/code]

[code]

    <img class="n1" src="https://i.stack.imgur.com/tE90I.jpg?s=328&g=1">
[/code]

なお説明をわかりやすくするために、このスニペットにはベンダープレフィックスをつけていません。よってブラウザ次第では正しく動作しない可能性がありますが、Chrome
43では正しく動作することを確認してあります。


CC BY-SA 3.0
2015-05-31T01:51:39.580
10805
2015-05-31T01:51:39.580
208
10800
answer