CSS3 动画效果

更新日期: 2015-12-12 阅读次数: 2983 分类: CSS

发现用 CSS3 来实现动画效果挺方便的,以下是 “大象笔记” 使用的动画效果。

<style type="text/css">
#logo-title {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  -moz-animation-iteration-count: 3;
  -webkit-animation-iteration-count: 3;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
}

@-moz-keyframes slidein {
  from {
    margin-left: 30%;
    transform: rotate(0deg);
  }

  75% {
    margin-left: 5%;
    transform: rotate(10deg);
  }

  to {
    margin-left: 0%;
    transform: rotate(0deg);
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left: 30%;
    transform: rotate(0deg);
  }

  75% {
    margin-left: 5%;
    transform: rotate(10deg);
  }

  to {
    margin-left: 0%;
    transform: rotate(0deg);
  }
}
</style>

参考

爱评论不评论

近期节日

2019年05月20日 全国助残日
2019年05月21日 小满
2019年05月30日 五卅运动纪念
2019年05月31日 世界无烟日
2019年06月01日 六一儿童节
2019年06月05日 世界环境日
2019年06月06日 芒种
2019年06月06日 全国爱眼日
2019年06月07日 端午节
2019年06月11日 中国人口日
2019年06月16日 父亲节
2019年06月20日 世界难民日
查看更多节日