CSS3 动画效果

发现用 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>

参考

• Using CSS animations

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式