CSS3 动画效果

更新日期: 2015-12-12 阅读次数: 2281 分类: 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>

参考

爱评论不评论

近期节日

2018年10月23日 霜降
2018年10月24日 联合国日
2018年10月31日 世界勤俭日
2018年11月01日 万圣节
2018年11月07日 立冬
2018年11月08日 中国记者日
2018年11月10日 世界青年节
2018年11月11日 光棍节
2018年11月14日 世界糖尿病日
2018年11月17日 国际大学生节
2018年11月20日 国际儿童日
2018年11月21日 世界问候日
查看更多节日