CSS3 动画效果

更新日期: 2015-12-12 阅读次数: 1959 分类: 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年08月23日 处暑
2018年08月25日 中元节
2018年08月26日 火人节
2018年09月03日 抗日胜利纪念日
2018年09月08日 白露
2018年09月08日 国际扫盲日
2018年09月10日 教师节
2018年09月16日 国际臭氧层保护日
2018年09月16日 世界清洁地球日
2018年09月18日 "九一八"事变纪念日
2018年09月20日 国际爱牙日
2018年09月21日 国际和平日
查看更多节日