CSS3によるSVGアニメーション
実行すると1秒後にAXELAという文字の描画が始まり2秒かけて描画し、最後の状態を保持して終了します。
実行してすぐの画面
AXELAという文字を破線にして、その間隔を表示されない間隔(下記のソース内stroke-dasharray: 2000;/*破線の間隔*/)まで広げているため、実行直後には文字は表示されていません。
実行して1秒後に描画を開始して、2秒間のアニメーションを行う。
破線の間隔を@keyframesによって2000から0に短くしていって最後には実線にします。
文字が実線になったら@keyframesで文字の色を白に変えています。
ソースファイル
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SVGアニメーション</title>
<style>
body {
background: #092951;
}
#box {
width: 800px;
margin: 100px auto 0;
position: relative;
}
.line {
stroke: #FFF;/*線の色*/
stroke-width: 1;/*線の太さ*/
fill: #092951;/*塗りの色(bodyの背景色を指定する)*/
stroke-dasharray: 2000;/*破線の間隔*/
stroke-dashoffset: 2000;/*破線の開始位置*/
animation: DASH 3s ease-in-out 1s forwards;/*2s:アニメーションの時間 1s:ディレイ*/
/*時間を1つしか指定しないとディレイになる*/
/*forwards:100%の状態をキープしておく*/
}
@keyframes DASH{
0% {stroke-dashoffset:2000;fill:#092951;}
70% {stroke-dashoffset:0;fill:#092951;}
100%{stroke-dashoffset:0;fill:#fff;}
}
#box div {
background: #fff;
position:absolute;
transition:all 0.3s ease-in-out 0.1s;
}
div.bdT{width: 0; height:1px; top:0; left:0;}
div.bdB{width: 0; height:1px; bottom:0; right:0;}
div.bdR{height:0; width :1px; right:0; top:0;}
div.bdL{height:0; width :1px; left:0; bottom:0;}
#box:hover div.bdT{width: 100%;}/*800px*/
#box:hover div.bdB{width: 100%;}/*800px*/
#box:hover div.bdR{height:100%;}
#box:hover div.bdL{height:100%;}
</style>
</head>
<body>
<div id="box">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 800 300" enable-background="new 0 0 800 300" xml:space="preserve">
<g>
<path class="line" fill="#231815" d="M155.412,226.872v-5.455c3.711-0.741,6.475-1.559,8.294-2.449c1.818-0.891,3.173-2.133,4.063-3.729
c0.891-1.595,1.336-3.729,1.336-6.401c0-2.522-0.297-5.25-0.891-8.183c-0.595-2.931-1.447-6.215-2.561-9.853l-4.119-14.361h-51.879
l-3.785,10.91c-1.931,5.493-3.191,9.649-3.785,12.469c-0.595,2.821-0.891,5.382-0.891,7.682c0,4.453,1.131,7.72,3.396,9.797
c2.264,2.079,5.733,3.451,10.409,4.119v5.455H67.463v-5.455c4.156-0.668,7.774-3.079,10.854-7.236
c3.079-4.155,6.067-10.093,8.962-17.813l46.424-123.24h17.59l37.852,124.131c1.781,5.789,3.357,10.206,4.731,13.248
c1.373,3.044,3.023,5.419,4.954,7.125c1.93,1.708,4.564,2.97,7.904,3.785v5.455H155.412z M112.662,166.755h46.535l-21.152-71.807
L112.662,166.755z"/>
<path class="line" fill="#231815" d="M262.398,74.909v5.455c-3.563,0.52-6.123,1.485-7.682,2.895c-1.559,1.411-2.338,3.34-2.338,5.789
c0,2.079,0.705,4.676,2.115,7.793c1.409,3.117,3.413,6.829,6.012,11.133l16.143,27.053l15.92-25.717
c2.375-3.858,4.156-6.939,5.344-9.24c1.187-2.3,2.021-4.23,2.505-5.789c0.482-1.559,0.724-3.154,0.724-4.787
c0-2.3-0.668-4.248-2.004-5.845c-1.336-1.595-3.563-2.689-6.68-3.284v-5.455h41.303v5.455c-2.746,0.891-5.215,2.19-7.403,3.896
c-2.189,1.708-4.527,4.194-7.014,7.459c-2.487,3.267-6.03,8.424-10.632,15.475l-25.16,38.965l28.277,46.535
c4.008,6.606,6.884,11.227,8.628,13.86c1.743,2.636,3.377,4.862,4.898,6.68c1.521,1.819,3.154,3.396,4.898,4.731
c1.743,1.336,3.914,2.487,6.513,3.451v5.455h-48.873v-5.455c3.413-0.593,5.938-1.539,7.57-2.839
c1.632-1.298,2.449-3.246,2.449-5.845c0-2.077-0.539-4.378-1.614-6.902c-1.076-2.522-2.728-5.64-4.954-9.352l-20.15-33.621
l-21.264,34.846c-3.563,5.864-5.344,10.688-5.344,14.473c0,2.449,0.668,4.453,2.004,6.012s3.563,2.636,6.68,3.229v5.455h-42.082
v-5.455c2.745-0.815,5.01-1.799,6.791-2.95c1.781-1.149,3.488-2.616,5.121-4.397c1.632-1.781,3.451-4.044,5.455-6.791
c2.004-2.745,5.194-7.532,9.574-14.361l26.273-40.969l-31.395-51.656c-2.969-4.749-5.215-8.2-6.735-10.354
c-1.521-2.152-2.933-3.896-4.23-5.232c-1.299-1.336-2.468-2.282-3.507-2.839c-1.04-0.557-2.227-1.058-3.563-1.503v-5.455H262.398z"
/>
<path class="line" fill="#231815" d="M456.666,74.909v33.621h-10.91c-1.113-3.636-2.264-6.828-3.451-9.574c-1.188-2.745-2.412-5.046-3.674-6.902
c-1.262-1.854-2.654-3.34-4.174-4.453c-1.522-1.113-3.322-1.874-5.4-2.282c-2.078-0.407-4.564-0.612-7.459-0.612h-35.18v58.336
h23.824c3.266,0,5.826-0.463,7.682-1.392c1.855-0.927,3.396-2.505,4.621-4.731s2.393-5.714,3.506-10.465h10.465v42.75h-10.465
c-1.039-4.453-2.189-7.811-3.451-10.075c-1.262-2.263-2.766-3.878-4.508-4.843c-1.745-0.964-4.361-1.447-7.85-1.447h-23.824v64.236
h34.623c3.637,0,6.586-0.314,8.852-0.946c2.263-0.63,4.211-1.706,5.844-3.229c1.633-1.521,3.08-3.507,4.342-5.956
s2.319-4.99,3.174-7.626c0.852-2.634,2.021-6.475,3.506-11.522h11.021l-2.115,39.076h-103.09v-5.455
c4.602-1.187,7.682-2.505,9.24-3.952s2.578-3.507,3.062-6.179c0.482-2.672,0.724-6.753,0.724-12.246v-96.299
c0-5.121-0.186-8.851-0.557-11.188c-0.372-2.338-0.984-4.156-1.837-5.455c-0.854-1.298-1.986-2.338-3.396-3.117
c-1.41-0.779-3.823-1.651-7.236-2.616v-5.455H456.666z"/>
<path class="line" fill="#231815" d="M517.563,216.63h29.168c3.191,0,5.863-0.185,8.016-0.557c2.152-0.37,3.989-0.946,5.512-1.726
c1.52-0.779,2.895-1.854,4.119-3.229c1.225-1.372,2.393-3.173,3.506-5.399s2.172-5.027,3.174-8.405
c1.002-3.376,2.244-8.441,3.729-15.196h11.244l-2.227,44.754H483.719v-5.455c4.602-1.187,7.682-2.505,9.24-3.952
s2.578-3.507,3.063-6.179c0.481-2.672,0.723-6.753,0.723-12.246v-96.299c0-5.121-0.186-8.851-0.557-11.188
s-0.984-4.156-1.836-5.455c-0.854-1.298-1.986-2.338-3.396-3.117s-3.822-1.651-7.236-2.616v-5.455h46.869v5.455
c-3.266,0.891-5.585,1.689-6.957,2.394c-1.375,0.706-2.506,1.652-3.396,2.839c-0.891,1.188-1.559,3.006-2.004,5.455
s-0.668,6.346-0.668,11.689V216.63z"/>
<path class="line" fill="#231815" d="M681.215,226.872v-5.455c3.711-0.741,6.475-1.559,8.295-2.449c1.817-0.891,3.172-2.133,4.063-3.729
c0.891-1.595,1.336-3.729,1.336-6.401c0-2.522-0.297-5.25-0.891-8.183c-0.594-2.931-1.447-6.215-2.561-9.853l-4.119-14.361h-51.879
l-3.785,10.91c-1.93,5.493-3.191,9.649-3.785,12.469c-0.594,2.821-0.891,5.382-0.891,7.682c0,4.453,1.131,7.72,3.396,9.797
c2.263,2.079,5.732,3.451,10.408,4.119v5.455h-47.537v-5.455c4.156-0.668,7.774-3.079,10.855-7.236
c3.078-4.155,6.066-10.093,8.961-17.813l46.424-123.24h17.59l37.852,124.131c1.781,5.789,3.357,10.206,4.732,13.248
c1.372,3.044,3.023,5.419,4.953,7.125c1.93,1.708,4.564,2.97,7.904,3.785v5.455H681.215z M638.465,166.755H685l-21.152-71.807
L638.465,166.755z"/>
</g>
</svg>
<div class="bdT"></div>
<div class="bdB"></div>
<div class="bdR"></div>
<div class="bdL"></div>
</div><!--/#box-->
</body>
</html>
