2018-01-30-CSS3动画实例

发表于 | 分类于
css3动画实例演示

c33动画想必大家并不陌生，在CSS3之前想要在网页中实现动画效果，少不了js操作 位置或css样式，繁琐而又乏味，而css3新增的动画效果着实简单又好上用，平移、旋转、缩放轻松搞定

  • 学习资料

当然少不了 w3cschool 助力

实例涉及知识点

  1. CSS3 转换 - 2D转换
  2. CSS3 过渡
  3. CSS3 动画
  4. echarts地图标注

demo 地址

  1. CSS + Jquery demo演示地址

https://zhangyingxuan.github.io/my2017Demo/

动画展示，星星缩放，月亮旋转角度

  • 星星闪烁
.page6_header_star4_img{
  position: absolute;
  left: 4rem;
  bottom: 1rem;
  width: 1.5rem;

  // 使用 beat动画 2s内执行完一次动画 匀速执行 反复执行
  -webkit-animation: beat 2s linear infinite;
  -moz-animation: beat 2s linear infinite;
  -o-animation: beat 2s linear infinite;
  animation: beat 2s linear infinite;
}
// 统一标识语句,符合w3c标准
@keyframes beat {
  0% {transform: scale(1)}
  15% {transform: scale(1.2)}   // 放大1.2倍
  30% {transform: scale(1)}
  55% {transform: scale(1.1)}
  100% {transform: scale(1)}
}

// -moz火狐内核识别码
@-moz-keyframes beat{
  0%{-moz-transform: scale(1) }
  15%{-moz-transform: scale(1.2) }
  30%{-moz-transform: scale(1) }
  55%{-moz-transform: scale(1.1) }
  100%{-moz-transform: scale(1) }
}
// -o代表欧朋【opera】内核识别码
@-o-keyframes beat{
  0%{-o-transform: scale(1) }
  15%{-o-transform: scale(1.2) }
  30%{-o-transform: scale(1) }
  55%{-o-transform: scale(1.1)}
  100%{-o-transform: scale(1) }
}
// -webkit谷歌内核识别码
@-webkit-keyframes beat {
  0% {-webkit-transform: scale(1)}
  15% {-webkit-transform: scale(1.2)}
  30% {-webkit-transform: scale(1)}
  55% {-webkit-transform: scale(1.1)}
  100% {-webkit-transform: scale(1)}
}
  • 月亮摇摆
.page6_header_moon_img{
// 使用 beat动画 2s内执行完一次动画 匀速执行 反复交替执行
  -webkit-animation: moonRotate 2s linear infinite alternate;
  -moz-animation: moonRotate 2s linear infinite alternate;
  -o-animation: moonRotate 2s linear infinite alternate;
  animation: moonRotate 2s linear infinite alternate;

  width: 10rem;
  position: absolute;
  left: 22%;
  bottom: 3rem;
}

@keyframes moonRotate{
  from{transform: rotate(-15deg) }
  to{transform: rotate(15deg) }
}
... // 其他浏览器兼容同上

H5 动画


/*尾巴摇动*/
.dog-tail{
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
    animation:dog-tail 2s infinite ease-in-out;
    -webkit-animation:dog-tail 2s infinite ease-in-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    transform:translate(0,0);-webkit-transform:translate(0,0);
    -webkit-opacity:1;opacity:1;
}
@keyframes dog-tail {
    10% {
        transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
    }
    20% {
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
    }
    30% {
        transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
    }
    40% {
        transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
    }
    50%,100% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

/* 掉落 */
.diaoluo {
    animation: diaoluo 1s infinite ease-in-out;
    -webkit-animation: diaoluo 1s infinite ease-in-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    transform: translateY(0); /*设置只在Z轴上移动*/
}

@keyframes diaoluo{
    0% {
        transform: translateY(-2.5rem); /*设置只在Z轴上移动*/
        -webkit-transform: translateY(-2.5rem); /*设置只在Z轴上移动*/
    }
    100% {
        transform: translateY(0); /*设置只在Z轴上移动*/
        -webkit-transform: translateY(0); /*设置只在Z轴上移动*/
    }
}

@keyframes container{
    0%,
    100%,
    20%,
    50%,
    80% {
        transition-timing-function: cubic-bezier(0.215,.61,.355,1); /*贝塞尔曲线 ： X1 Y1 X2 Y2*/
        transform: translate3d(0,0,0); /*设置只在Z轴上移动*/
        -webkit-transform: translate3d(0,0,0); /*设置只在Z轴上移动*/
    }
    40%,
    43%{
        transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
        transform: translate3d(0,-30px,0);
        -webkit-transform: translate3d(0,-30px,0);
    }
    70%{
        transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
        transform: translate3d(0,-15px,0);
        -webkit-transform: translate3d(0,-15px,0);
    }
    90%{
        transform: translate3d(0,-4px,0);
        -webkit-transform: translate3d(0,-4px,0);
    }
}

/* 右上浮动 */
.fudong{
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  animation:fudong 5s infinite ease-in-out;
  -webkit-animation:fudong 5s infinite ease-in-out;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  transform:translate(0,0);-webkit-transform:translate(0,0);
  -webkit-opacity:1;opacity:1;
}
@keyframes  fudong
{
    0%  { transform:translate(0,0);-webkit-transform:translate(0,0);}
    50%  { transform:translate(0.25rem, -0.25rem);-webkit-transform:translate(0.25rem,-0.25rem); }
    100%  { transform:translate(0,0);-webkit-transform:translate(0,0);}
}

/* 上下浮动 */
.fudong_top {
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  animation:fudong 5s infinite linear;
  -webkit-animation:fudong 5s infinite ease-in-out;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  transform:translate(0,0);-webkit-transform:translate(0,0);
-webkit-opacity:1;opacity:1;
}
@keyframes  fudong
{
    0%  { transform:translate(0,0);-webkit-transform:translate(0,0);}
    50%  { transform:translate(0, -0.25rem);-webkit-transform:translate(0,-0.25rem); }
    100%  { transform:translate(0,0);-webkit-transform:translate(0,0);}
}

/* 场景动画 - 无特殊需求 请勿随意更改*/
/* 跳动提示 */
.tiaodong{
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  animation:tiaodong 3s infinite linear;
  -webkit-animation:tiaodong 3s infinite linear;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  transform:translate(0,0);-webkit-transform:translate(0,0);
}
@keyframes  tiaodong
{
    0%  { transform:translate(0,0);-webkit-transform:translate(0,0);}
    50%  { transform:translate(0,0);-webkit-transform:translate(0,0); }
    75%  { transform:translate(0,0.05rem);-webkit-transform:translate(0,0.05rem); }
    100%  { transform:translate(0,0);-webkit-transform:translate(0,0);}
}

/* 闪动 */
.dd_line {
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  animation:dd_line 1.2s infinite linear;
  -webkit-animation:dd_line 1.2s infinite linear;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d ;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  -webkit-opacity:0;opacity:0;
}
@keyframes  dd_line
{
  0%  {-webkit-opacity:0;opacity:0; }
  50%  {-webkit-opacity:0.6;opacity:0.6; }
  100%  {-webkit-opacity:1;opacity:1;}
}

/* 文字闪动 */
.text_line {
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  animation:text_line 3s infinite linear;
  -webkit-animation:text_line 3s infinite linear;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d ;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  -webkit-opacity:0;opacity:0;transform:rotate(-5deg);-webkit-transform:rotate(-5deg);
}
@keyframes  text_line
{
  0%  {-webkit-opacity:0;opacity:0;transform:rotate(-5deg);-webkit-transform:rotate(-5deg);  }
  50%  {-webkit-opacity:0;opacity:0;transform:rotate(-5deg);-webkit-transform:rotate(-5deg);  }
  100%  {-webkit-opacity:1;opacity:1;transform:rotate(-5deg);-webkit-transform:rotate(-5deg);}
}

/* 淡入 */
.dr {
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  animation:dr 2s;
  -webkit-animation:dr 2s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d ;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  -webkit-opacity:0;opacity:0;
}
@keyframes  dr
{
  0%  {-webkit-opacity:0;opacity:0;}
  50%  {-webkit-opacity:0;opacity:0;}
  100%  {-webkit-opacity:1;opacity:1;}
}

/* 朝上滑出淡入 */
.hcdr_for_top {
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
    animation:hcdr_for_top 2s;
    -webkit-animation:hcdr_for_top 2s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;
    transform:translate(0,2rem);-webkit-transform:translate(0,2rem);-webkit-opacity:0;opacity:0;
}
@keyframes  hcdr_for_top
{
    0%  {transform:translate(0,1rem);-webkit-transform:translate(0,1rem);-webkit-opacity:.5;opacity:.5;}
    100%  {transform:translate(0,0);-webkit-transform:translate(0,0);-webkit-opacity:1;opacity:1;}
}

/* 朝左滑出淡入 */
.hcdr_for_left {
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  animation:hcdr_for_left 2s;
  -webkit-animation:hcdr_for_left 2s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  transform:translate(2rem,0);-webkit-transform:translate(2rem,0);opacity:0;-webkit-opacity: 0;
}
@keyframes  hcdr_for_left
{
  0%  {transform:translate(2rem,0);-webkit-transform:translate(2rem,0);opacity:0;-webkit-opacity: 0;}
  50%  {transform:translate(2rem,0);-webkit-transform:translate(2rem,0);opacity:0;-webkit-opacity: 0;}
  100%  {transform:translate(0,0);-webkit-transform:translate(0,0);opacity:1;-webkit-opacity: 1;}
}

/* 朝右滑出淡入 */
.hcdr_for_right {
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  animation:hcdr_for_right 2s;
  -webkit-animation:hcdr_for_right 2s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  transform:translate(-2rem,0);-webkit-transform:translate(-2rem,0);-webkit-opacity:0;opacity:0;
}
@keyframes  hcdr_for_right
{
  0%  {transform:translate(-2rem,0);-webkit-transform:translate(-2rem,0);-webkit-opacity:0;opacity:0;}
  50%  {transform:translate(-2rem,0);-webkit-transform:translate(-2rem,0);-webkit-opacity:0;opacity:0;}
  100%  {transform:translate(0,0);-webkit-transform:translate(0,0);-webkit-opacity:1;opacity:1;}
}

/* 从大到小淡入 */
.bhdr_for_sm {
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
    animation:bhdr_for_sm 2s;
    -webkit-animation:bhdr_for_sm 2s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d ;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000;
    -webkit-perspective: 1000;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;
    transform:scale(2,2)rotate(-4deg);-webkit-transform:scale(2,2)rotate(-4deg);-webkit-opacity:0;opacity:0;
}
@keyframes  bhdr_for_sm
{
    0%  {transform:scale(2,2)rotate(-4deg);-webkit-transform:scale(2,2)rotate(-4deg);-webkit-opacity:0;opacity:0;}
    50%  {transform:scale(2,2)rotate(-4deg);-webkit-transform:scale(2,2)rotate(-4deg);-webkit-opacity:0;opacity:0;}
    100%  {transform:scale(1,1)rotate(-4deg);-webkit-transform:scale(1,1)rotate(-4deg);-webkit-opacity:1;opacity:1;}
}

/* 从小到大淡入 */
.bhdr_for_big{
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  animation:bhdr_for_big 2s;
  -webkit-animation:bhdr_for_big 2s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d ;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  transform:scale(0,0);-webkit-transform:scale(0,0);-webkit-opacity:0;opacity:0;
}
@keyframes  bhdr_for_big
{
  0%  {transform:scale(0,0);-webkit-transform:scale(0,0);-webkit-opacity:0;opacity:0;}
  50%  {transform:scale(0,0);-webkit-transform:scale(0,0);-webkit-opacity:0;opacity:0;}
  100%  {transform:scale(1,1);-webkit-transform:scale(1,1);-webkit-opacity:1;opacity:1;}
}

/* 水平翻转淡入 */
.fzdr_for_sp {
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  animation:fzdr_for_sp 2s;
  -webkit-animation:fzdr_for_sp 2s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d ;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-webkit-opacity:0;opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible;
}
@keyframes  fzdr_for_sp
{
  0%  {transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-webkit-opacity:0;opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible}
  50%  {transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-webkit-opacity:0;opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible}
  100%  {transform:rotateY(0deg);-webkit-transform:rotateY(0deg);-webkit-opacity:1;opacity:1;-webkit-backface-visibility:visible;backface-visibility:visible}
}
/* 垂直翻转淡入 */
.fzdr_for_cz {
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  animation:fzdr_for_cz 2s;
  -webkit-animation:fzdr_for_cz 2s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d ;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  transform:rotateX(720deg);-webkit-transform:rotateX(720deg);-webkit-opacity:0;opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible;
}
@keyframes  fzdr_for_cz
{
  0%  {transform:rotateX(720deg);-webkit-transform:rotateX(720deg);-webkit-opacity:0;opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible}
  50%  {transform:rotateX(720deg);-webkit-transform:rotateX(720deg);-webkit-opacity:0;opacity:0;-webkit-backface-visibility:visible;backface-visibility:visible}
  100%  {transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-webkit-opacity:1;opacity:1;-webkit-backface-visibility:visible;backface-visibility:visible}
}

/* 首页效果 */
.index_adm{
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  animation:index_adm 3s;
  -webkit-animation:index_adm 3s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d ;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  transform:scale(1,1)translate(0,0);-webkit-transform:scale(1,1)translate(0,0);
}
@keyframes index_adm
{
  0%  { transform:scale(1,1)translate(0,0);-webkit-transform:scale(1,1)translate(0,0);}
  50%  {transform:scale(1.3,1.3)translate(0.1rem,-1rem);-webkit-transform:scale(1.3,1.3)translate(0.1rem,-1rem);-webkit-opacity:1;opacity:1;}
  100%  {transform:scale(100,100)translate(0.1rem,-1rem);-webkit-transform:scale(100,100)translate(0.1rem,-1rem);-webkit-opacity:0;opacity:0;}
}

echarts地图展示

源码地址, 喜欢记得star哦

https://github.com/zhangyingxuan/my2017Demo

  1. vue-cli + mint-ui + css3

使用mint-ui的轮播swipe组件，结合CSS3动画编写demo

源码地址, 喜欢记得star哦

https://github.com/zhangyingxuan/my2017Demo4Vue