姓名:郭哲瑋

就讀學校:崑山科技大學

科系:資訊管理系 研究所

參考程式:

HTML

<div class="ant">
   <img class="animg" src="animate/animate.png" />
   <div class="cnt">
      <div class="txt">
         <h3>姓名:郭哲瑋</h3>
         <h3>就讀學校:崑山科技大學</h3>
         <h3>科系:資訊管理系 研究所</h3>
      </div>
   </div>
</div>

CSS

   .ant{
      width:20%;
      height:300px;
      position:relative;
      margin-left:auto;
      margin-right:auto;
      margin-top:50px;
   }
   .animg{
      height:100%;
      position:absolute;
   }
   .cnt{
      position:absolute;
      width:100%;
   }
   .txt{
		position:absolute;
      opacity:0;
      padding:10px;
   }

   @keyframes imgef {
      from{left:0px; opacity:1;}
      to  {left:200px; opacity:0;}
   }
   .ant:hover .animg{   
      animation-name:imgef;
      animation-duration:1s;
      animation-iteration-count:1;
      animation-fill-mode:forwards;
   }

   @keyframes txtef {
      from{left:-200px; opacity:0;}
      to  {left:0px; opacity:1;}
   }
   .ant:hover .txt{   
      animation-name:txtef;
      animation-duration:1s;
      animation-iteration-count:1;
      animation-fill-mode:forwards;
   }

   @keyframes cntef{
      from{height:0px;}
      to  {height:100%;}
   }
   .ant:hover .cnt{
      animation-name:cntef;
      animation-duration:1s;
      animation-iteration-count:1;
      animation-fill-mode:forwards;
      border:5px solid black;
   }