[CSS] CSS Transitions: Delays and Multiple Properties

Posted Answer1215

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[CSS] CSS Transitions: Delays and Multiple Properties相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>Wombat Revealer</h1>
  
  <div class="item one">
    <div class=‘cover‘>
      <span>Reveal Wombat!</span>
    </div>
    <img src="https://c2.staticflickr.com/6/5290/5262975644_bc61d8702d_b.jpg" width=320 />
  </div>
  
  <div class="item two">
    <div class=‘cover‘>
      <span>Reveal Wombat!</span>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Common_Wombat_(Vombatus_ursinus_tasmaniensis).jpg" width=320 />
  </div>
  
  <div class="item three">
    <div class=‘cover‘>
      <span>Reveal Wombat!</span>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/1024px-Vombatus_ursinus_-Maria_Island_National_Park.jpg" width=320 />
  </div>
</body>
</html>

 

.item .cover {
  width: 320px;
  height: 213px;
  background-color: yellow;
  position: absolute;
  transition: opacity 500ms 200ms,
    transform 500ms;
}

.item .cover.open {
  opacity: 0;
  transform: rotate(180deg);
}

 

jQuery(‘.cover‘).click(function(e) {
  var target = jQuery(e.currentTarget);
  target.toggleClass(‘open‘);
});

 

以上是关于[CSS] CSS Transitions: Delays and Multiple Properties的主要内容，如果未能解决你的问题，请参考以下文章

CSS3中动画效果Transitions与Animations的区别

css3动画由浅入深总结

CSS过渡属性transitions详细解读——Web前端系列学习笔记

CSS过渡属性transitions详细解读——Web前端系列学习笔记

css3动画由浅入深总结

Animations功能（区别于Transitions)