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

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