/*指定した幅、高さだけ表示*/
#mask {
    width: 980px;
    height: 400px;
    overflow: hidden;/*指定した幅だけ見える*/
    position: relative;
    margin:0 auto;
    padding:0;
}


ul#photo {
    top: 0;
    left: 0;
    width: 3920px;/*アニメーションさせる画像の合計幅*/
    height: 400px;/*写真縦*/
    position: absolute;
    margin:0;
    padding:0;
    list-style-type:none;
}

/*写真を横一列に配置*/
ul#photo li {
    width: 980px;
    height: 400px;
    float: left;
    list-style-type: none;
    margin:0;
    padding:0;
}

/*アニメーション定義*/
@-webkit-keyframes Slide {
    0% {left: 0;}/*0で始まり・・・*/
    20% {left: 0;}
    25% {left: -980px;}/*20秒の25％、つまり6秒進んだらずらす*/

    45% {left: -980px;}
    50% {left: -1960px;}

    70% {left: -1960px;}
    75% {left: -2940px;}

    95% {left: -2940px;}
    100% {left: 0;}/*20秒の100％、つまり20秒になったら0、初期の場所へ。*/
}
ul#photo {
    -webkit-animation-name: Slide;/*定義したアニメーションの呼び出し*/
    -webkit-animation-duration: 24s;/*アニメーションは『合計』で何秒か*/
    -webkit-animation-iteration-count:infinite;/*『infinite』無制限に繰り替えす*/
}