CSS3 动画效果

更新日期: 2015-12-12 阅读次数: 2627 分类: 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年01月27日 国际麻风节
2019年01月28日 小年
2019年02月02日 世界湿地日
2019年02月04日 立春
2019年02月04日 除夕
2019年02月05日 春节
2019年02月07日 国际声援南非日
2019年02月10日 国际气象节
2019年02月14日 情人节
2019年02月19日 雨水
2019年02月19日 元宵节
2019年02月24日 第三世界青年日
查看更多节日