CSSだけでiOSのロックスクリーンを作る

CSS3のKeyframeを利用

今日紹介するのはCSS Animationを使ってiOS7ロックスクリーンのスライダーの様に、キラリラリンとなるテキストの作り方です。

今回はKeyframeを利用してアニメーションを実装します。

@keyframes は、アニメーション中に到達すべきポイントであるキーフレーム (通過点) を明示することで、CSS animation の流れの中間地点をページ作者が制御することを可能にします。これにより、ブラウザにすべてを自動的に扱わせる場合よりも、アニメーションの流れの中間地点をより明確に制御することができます。

keyframesの構文

@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

キーフレームのリストを識別する名前。これは CSS 構文規則で定義されている識別子に適合する必要があります。
from
アニメーションの始まりである 0% を示す。
to
アニメーションの終わりである 100% を示す。

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

さっそく実装

HTML,CSSはこんな感じです。Jade,Stylusで書いてる方が見やすいと思いますのでそのまま載せときます。

index.jade

extends layout

block content
  div#background
  div#lockscreen
    div#status-bar
      span#rssi ●●●●○
      span#carrer Softbank
      span#wifi
      span#GPS
      span#battery

    div#time
      span 11:18

    div#date
      span 1月28日金曜日

    div#slider
      span > スライドでロック解除

    div#camera

style.styl

*
  padding 0
  margin 0
  color #FFF
  font-size 13px
  font-family "Helvetica Neue"
  font-weight lighter
  line-height 1.1

body
  height 100%
  background #000

div
  overflow hidden


div#wrap
  position relative
  width 100%

div#lockscreen
  width 100%

div#background
  background #000
  height 100%

div#status-bar
  span
    letter-spacing 0px 
    padding 5px 
    float left
    font-weight normal

div#time
  text-align center
  span
    font-size 600%

div#date
  text-align center
  span
    font-size 150%
    font-weight normal

div#slider
  position absolute
  bottom 10%
  width 100%
  text-align center
  background #999 -webkit-gradient(linear, left top, right top, color-stop(0, #999), color-stop(0.5, #fff), color-stop(1, #999))
  background-size 20% 100%
  background-repeat no-repeat
  background-position -200px top
  -webkit-background-clip text
  -webkit-text-fill-color transparent
  -webkit-animation shimmer 4s infinite
  span
    font-size 190%
    -webkit-text-fill-color transparent
    opacity 1
@keyframes shimmer 
  0%
    background-position -10% 0
    opacity 1
  100%
    background-position 110% 0
    opacity 1

CSSの最後にkeyframesがありますね、ここでバックグラウンドをを左から右へ動かしています。

Point

ポイントはここ！
1.グラデーションでバックグラウンドを宣言
2.-webkit-background-clip textでテキストの形のマスクを作る
3.-webkit-text-fill-color transparentでテキストの色を透明にする
4.-webkit-animation shimmer 4s infiniteでKeyframe Animationを実行

style.styl

div#slider
  position absolute
  bottom 10%
  width 100%
  text-align center
  background #999 -webkit-gradient(linear, left top, right top, color-stop(0, #999), color-stop(0.5, #fff), color-stop(1, #999))
  background-size 20% 100%
  background-repeat no-repeat
  background-position -200px top
  -webkit-background-clip text
  -webkit-text-fill-color transparent
  -webkit-animation shimmer 4s infinite