CSS animation 示例

<!DOCTYPE html>
<html>
<head>
  <title>CSS animation 示例</title>
  <style type="text/css">
    @keyframes slide {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(300px);
      }
    }
    
    @keyframes fade {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }