WebUI/插件库

CSS3动画插件：Animate.css

2019-12-02  本文已影响0人  CodeMT

官网：https://daneden.github.io/animate.css/
GitHub：https://github.com/daneden/animate.css

CSS动画 可以取代js动画 在移动端会更加流畅！

下面是一个的绘制太阳系各大行星运行轨迹笔记，可以自学参考！
首先我们需要创建一个@keyframes规则

@keyframes name{
  from{width:1px}
  to{width:100px}
}
//或者使用百分比
@keyframes name{
  0%{width:1px}
  100{width:100px}
}

创建好之后，我们需要在css选择器里引用我们写的规则，

<div class="box1"></div>

.box1{
  width: 0px;
  height: 100px;
  background-color: #00FF7F;
  /* 引用 / 捆绑*/
  animation: first 2s;
}
@keyframes first{
  0%{width:1px}
  100{width:100px}
}

效果图：

当然我们除了改变宽度width 还可以改变其他的属性：height、定位、移动、旋转、缩放等你所能想到的css属性

css3动画属性非常多，我感觉常用的是animation的简写形式和一个动画周期需要花费的时间animation-duration;

以下也是一个小的实例：

<div class="horse"></div>

html,body {
  height: 100%;
}

.horse {
  width: 128px;
  height: 128px;
  background: url(images/Horse_256px_1096282_easyicon.net.png) no-repeat;
  background-size: 100% 100%;

  transform: scaleX(-1);
  animation: bounce 0.1s infinite;
}

@keyframes runhorse {
  0% {
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  25% {
    transform: translate(calc(100vw - 128px), 10px) scaleY(-1);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }
  50% {
    transform: translate(calc(100vw - 129px), calc(100vh - 200px));
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }
  75% {
    transform: translate(0, calc(100vh - 128px)) scaleX(-1);
  }
  100% {
    transform: translate(10px, 10px) translate3d(0, -4px, 0);
  }
}

body:hover .horse {
  animation: runhorse 2s linear infinite;
}

效果图：

没考虑小马的头的方向，只是写了旋转的效果，很多css属性都可以用到动画效果里。可以参考~

推荐使用animate.css
①下载animate.css

②或者直接进入animate.css 随后右键另存为即可使用

③直接在页面顶部head标签通过link引入

基本模板如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>动画</title>
  <link rel="stylesheet" href="css/animate.css">
  <style>
    .demo1{
      font-size: 30px;
      font-weight: bold;
      color: #00008B;
    }
  </style>
</head>
<body>
  <div class="demo1 animated zoomIn infinite">
    Anyw3c
    </div>
</body>
</html>

效果如下：

接下来，就是对animate.css运动的一个小总结 按官网顺序

①Attention seekers

②Bouncing Entrances

③Fading Entrances

④Flippers

⑤Lightspeed

⑥Rotating Entrances

⑦Sliding Entrances

⑧Zoom Entrances

⑨Specials

若想用到延时加载和控制运动过渡时间，就必须要用到jquery了，所以我们先去找个jq引入到页面底部

Demo如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" href="css/animate.css" />
  <style type="text/css">
    .test{
      position: absolute;
      width: 100px;
      font-size: 50px;
      top: 50px;
      left: 50%;
      margin-left: -50px;
    }
  </style>
</head>
<body>
<div class="animated rollIn test">test</div>
<script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(document).ready(function(){
    &emsp;&emsp;$('.test').css({'animation-duration':'.3s','animation-delay':'3s'})
  })
</script>
</body>
</html>

使用jq来重定义css样式，这种方法其实违背了animate简化运动代码的初衷！

上一篇下一篇

猜你喜欢

热点阅读