CSS动画弹性就像轻松一样

时间:2017-11-07 23:24:07

标签: jquery html5 css3 css-transitions css-animations

我正在尝试在此link中创建类似的动画。

我有以下CSS来制作类似的东西,我可以切换trnasform属性。

$(document).ready(function() {
var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
    
    swiper.on("slideChange", function() {
    	$(".main").hide();
      setTimeout(function() {
	      $(".main").show();
			}, 500)

		})
    });
   html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.min.css" rel="stylesheet"/>
<script     src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script     src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">
  <div class="main">
    <p class="animated slideInDown">
    Para 2 lorem<br/>ipsum going to<br/><br/>the forward area
    </p>
   </div>
</div>
<div class="swiper-slide">Slide 3</div>
</div>

<div class="swiper-pagination"></div>
</div>

但是给定的css看起来并不像链接中给出的那样准确。有人请帮助选择这样的css动画库。

先谢谢

0 个答案:

没有答案