css3动画之transition和animation

建议浏览器打开


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
    #transition-demo {
      height: 100px;
      background-color: yellowgreen;
      transition: height 1s 0.5s ease-out;
    }
    #transition-demo:hover {
      height: 200px;
    }

    #animation-demo {
      height: 200px;
      animation: 3s type forwards alternate infinite;
      animation-play-state: running;
    }

    #animation-demo:hover {
      animation-play-state: paused;
    }

    @keyframes type {
      from {background: yellowgreen}
      50% {background: yellow}
      to {background: aquamarine}
    }
  style>
head>
<body>
<h1>css3动画h1>
<pre>参考:<a href="http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html" target="_blank">阮一峰的文章a>pre>
<p>主要有transition属性和animation属性p>
<div id="transition-demo">
  transition例子
div>

<h3>transition常用属性h3>
<div>
  <p>transition-property: height; // 适用于哪个属性p>
  <p>transition-duration: 1s;p>
  <p>transition-delay: 1s;p>
  <p>transition-time-function: ease/linear/ease-in(加速)/ease-out/cubic-bezier(自定义);p>
div>

<h3>transition特性h3>
<div>
  <p>0. 需要具体数值,不能用block,none等p>
  <p>1. transition需用事件触发,不能在网页加载时自动发生p>
  <p>2. 一次性,不能重复发生,除非一再触发p>
  <p>3. 只有两个状态:开始和结束状态p>
  <p>4. 一条transition规则只能定义一个属性p>
div>

<div id="animation-demo">
  animation例子,鼠标悬停试试
div>

<h3>animation常用属性h3>
<div>
  <p>animation-name: rainbow;p>
  <p>animation-duration: 1s;p>
  <p>animation-timing-function: ease-in-out;p>
  <p>animation-delay: 1s;p>
  <strong>animation-fill-mode(动画停留在): none(动画没开始时)/forwards(结束)/backwards(第一帧)/both;strong>
  <p><strong>animation-direction(动画播放方向): normal(正向)/alternate(交替慎用)/reverse(反向)/alternate-reverse(反向交替慎用);strong>p>
  <p>animation-iteration-count(播放次数): 3/<strong>infinite(无限)strong>;p>
  <p>steps(10)函数实现分步过渡p>
  <p>animation-play-state(用于让动画保持<strong>突然终止时的状态strong>):running(例如悬停时播放)/paused(非悬停时暂停);
  <strong>注意这个属性不能简写strong>
  p>
div>
body>
html>

你可能感兴趣的:(面试,CSS)