/* main element */
.weather {
    position: relative; overflow: hidden;
}
/* pseudo elements: positioning and setup */
.weather:before, .weather:after {
    content: "";
    position: absolute; left: -50%; top: -50%; right: -50%; bottom: -50%;
    z-index: 1;
    pointer-events: none;
    
    background: transparent repeat;
    opacity: 0.7;
    
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
    
    -webkit-animation-name: weather;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-name: weather;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.weather:after {
    opacity: 0.8;
    -webkit-animation-name: weather2;
    animation-name: weather2;
}

/* snow (slow, snow.png) */
.weather.snow:before, .weather.snow:after {
    background-image: url(../images/snow.png);
    -webkit-animation-duration: 25s;
    animation-duration: 25s;
}
.weather.snow:after {
    -webkit-animation-duration: 25s;
    animation-duration: 25s;
}
/* animation keyframes */
@-webkit-keyframes weather {
    from { background-position: 0 0px; }
    to { background-position: 0 1024px; }
}
@keyframes weather {
    from { background-position: 0 0px; }
    to { background-position: 0 1024px; }
}
@-webkit-keyframes weather2 {
    from { background-position: 64px 64px; }
    to { background-position: 64px 1088px; }
}
@keyframes weather2 {
    from { background-position: 64px 64px; }
    to { background-position: 64px 1088px; }
}













/*細條*/
/* main element */
.weather2 {
    position: relative; overflow: hidden;
}
/* pseudo elements: positioning and setup */
.weather2:before, .weather2:after {
    content: "";
    position: absolute; left: -50%; top: -50%; right: -50%; bottom: -50%;
    z-index: 1;
    pointer-events: none;
    
    background: transparent repeat;
    opacity: 0.7;
    
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
    
    -webkit-animation-name: weather;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-name: weather;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
.weather2:after {
    opacity: 0.8;
    -webkit-animation-name: weather2;
    animation-name: weather2;
}

/* snow (slow, snow.png) */
.weather2.snow:before, .weather2.snow:after {
    background-image: url(../images/snow.png);
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
}
.weather2.snow:after {
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
}
/* animation keyframes */
@-webkit-keyframes weather2 {
    from { background-position: 0 0px; }
    to { background-position: 0 1024px; }
}
@keyframes weather2 {
    from { background-position: 0 0px; }
    to { background-position: 0 1024px; }
}
@-webkit-keyframes weather2 {
    from { background-position: 64px 64px; }
    to { background-position: 64px 1088px; }
}
@keyframes weather2 {
    from { background-position: 64px 64px; }
    to { background-position: 64px 1088px; }
}