Difference between revisions of "Team:Uppsala/Composite Part"

(Undo revision 375013 by Mk3johnson (talk))
Line 12: Line 12:
 
<title>SVG Stroke Animation</title>
 
<title>SVG Stroke Animation</title>
 
<style type="text/css">
 
<style type="text/css">
−
 
+
    html{
 +
        margin:0;
 +
        padding:0;
 +
        width:100%;
 +
    }
 +
    .parallax{
 +
background-image: url("https://static.igem.org/mediawiki/2018/a/a6/T--Uppsala--UnaGPotentialBackground.png");
 +
}
 +
   
 +
    body{
 +
        margin: 0;
 +
        padding: 0;
 +
        width: 100%;
 +
        text-align: center;
 +
        background: url(https://static.igem.org/mediawiki/2018/5/50/T--Uppsala--horses.jpg) no-repeat 50% 50%;
 +
        background-size: cover;
 +
        height:100vh;
 +
        display: table;
 +
    }
 +
   
 +
    .svg-wrapper{
 +
        position:absolute;
 +
        top:45vh;
 +
        left:50%;
 +
        transform: translate(-50%, -50%);
 +
        width: 60%;
 +
    }
 +
   
 +
    path{
 +
        stroke: red;
 +
        fill: #fff;
 +
        stroke-dasharray:2000 ;
 +
        opacity: 10;
 +
        animation: animate 3s cubic-bezier(0,.21,1,.47) ;
 +
    }
 +
   
 +
    @keyframes animate{
 +
        0% {
 +
            opacity: 0;
 +
            fill: none;
 +
            stroke-dashoffset:2000;
 +
        }
 +
       
 +
        30% {
 +
            opacity: 10;
 +
            fill: none;
 +
            stroke-dashoffset:2000;
 +
        }
 +
       
 +
            90% {
 +
           
 +
            fill: rgba(255,255,255,0);
 +
           
 +
            }
 +
           
 +
        100% {
 +
            opacity: 10;
 +
            fill: rgba(255,255,255,1);
 +
            stroke-dashoffset:0;
 +
            }
 +
    }
 +
   
 
</style>
 
</style>
 
</head>
 
</head>

Revision as of 20:14, 16 October 2018





SVG Stroke Animation