席琳網頁設計工作室 祝福您
2016年 新年快樂
吉祥如意 發大財!

語法應用

上述的文字動畫效果,是讓文字由上往下移動反覆二次後,停止在原始設定位置,可以參考:
簡體教學網址:http://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp
英文教學網址:http://www.w3schools.com/css/css3_animations.asp

@KEYFRAMES 'ANIMAITON-NAME'
{
0% {LEFT: 100PX;}
40% {LEFT: 150PX;}
60% {LEFT: 75PX;}
100% {LEFT: 100PX;} }

p{
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 3s infinite;
animation-iteration-count:2;
-webkit-animation-iteration-count:2;
-moz-animation-iteration-count:2; /*Safari and Chrome*/}

@keyframes mymove{
from {top:-999px;}
to {top:105px;} }

@-webkit-keyframes mymove {
from {top:-999px;}
to {top:105px;}