Related
I'm working on this to have the rect to change colors. Each rect will change on a 0.1s delay.
Let's say I want to have more rectangles or path, how can I simplify the code? I think it could be simplified using scss but what about using CSS? is there a smarter way to do so rather than the way I have done?
#svg rect:nth-child(1) {
animation: ani 1.8s linear infinite;
animation-delay: 0.1s;
}
#svg rect:nth-child(1):hover {
animation-play-state: paused;
}
#svg rect:nth-child(2) {
animation: ani 1.8s linear infinite;
animation-delay: 0.2s;
}
#svg rect:nth-child(2):hover {
animation-play-state: paused;
}
#svg rect:nth-child(3) {
animation: ani 1.8s linear infinite;
animation-delay: 0.3s;
}
#svg rect:nth-child(3):hover {
animation-play-state: paused;
}
#svg rect:nth-child(4) {
animation: ani 1.8s linear infinite;
animation-delay: 0.4s;
}
#svg rect:nth-child(4):hover {
animation-play-state: paused;
}
#svg rect:nth-child(5) {
animation: ani 1.8s linear infinite;
animation-delay: 0.5s;
}
#svg rect:nth-child(5):hover {
animation-play-state: paused;
}
#keyframes ani {
0% {
fill: #0057B8;
}
20% {
fill: #F11E4A;
}
40% {
fill: #F8A527;
}
60% {
fill: #266D7F;
}
80% {
fill: #82A;
}
100% {
fill: #0057B8;
}
}
<svg id="svg" width="401" height="275" viewBox="0 0 401 275" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="401" height="275" fill="white"/>
<rect x="50" y="91" width="57" height="57" fill="#C4C4C4"/>
<rect x="118" y="91" width="57" height="57" fill="#C4C4C4"/>
<rect x="186" y="91" width="57" height="57" fill="#C4C4C4"/>
<rect x="254" y="91" width="57" height="57" fill="#C4C4C4"/>
</svg>
For the :hover and base rect animation duplication, they can each be refactored into their own block.
#svg rect {
--animation-delay: 0.1s;
animation: ani 1.8s linear infinite var(--animation-delay);
}
#svg rect:hover {
animation-play-state: paused;
}
I would store the animation delay in a custom property and add it to the lone animation call.
#svg rect {
--animation-delay: 0.1s;
animation: ani 1.8s linear infinite var(--animation-delay);
}
Now you can override the delay later when necessary, such as:
#svg rect:nth-child(3) { --animation-delay: 0.2s; }
The delay will automatically update for that child's animation.
Here's the complete code:
#svg rect {
--animation-delay: 0.1s;
animation: ani 1.8s linear infinite var(--animation-delay);
}
#svg rect:hover {
animation-play-state: paused;
}
<!-- No way to shorten this in pure CSS 😠-->
#svg rect:nth-child(2) { --animation-delay: 0.2s; }
#svg rect:nth-child(3) { --animation-delay: 0.3s; }
#svg rect:nth-child(4) { --animation-delay: 0.4s; }
#svg rect:nth-child(5) { --animation-delay: 0.5s; }
#keyframes ani {
0% {
fill: #0057B8;
}
20% {
fill: #F11E4A;
}
40% {
fill: #F8A527;
}
60% {
fill: #266D7F;
}
80% {
fill: #82A;
}
100% {
fill: #0057B8;
}
}
<svg id="svg" width="401" height="275" viewBox="0 0 401 275" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="401" height="275" fill="white" />
<rect x="50" y="91" width="57" height="57" fill="#C4C4C4" />
<rect x="118" y="91" width="57" height="57" fill="#C4C4C4" />
<rect x="186" y="91" width="57" height="57" fill="#C4C4C4" />
<rect x="254" y="91" width="57" height="57" fill="#C4C4C4" />
</svg>
jsFiddle
All your :hover effects are the same, and so are your animation properties so you can simplify those to one rule each:
#svg rect {
animation: ani 1.8s linear infinite;
}
#svg rect:hover {
animation-play-state: paused;
}
that would already reduce the lines a lot, for the animation delays themselves your method is ok.
If you are intrested in a CSS solution you can do something like below. It's a bit different animation but you can easily scale it by keeping the same code.
The trick is to animate the same gradient for all the boxes to simulate the color changes. Note how I made the pseudo element relative to the .box not the child elements to have the same layer
.box {
display:inline-flex;
margin:5px;
padding:50px 20px;
position:relative;
background:right/800% 100%;
background-image:linear-gradient(to left,#0057B8,#F11E4A,#F8A527,#266D7F,#82A,#0057B8);
animation: ani 1.8s linear infinite;
}
.box > div {
margin:5px;
height:55px;
width:55px;
background-image:inherit;
-webkit-mask: linear-gradient(#fff,#fff);
mask: linear-gradient(#fff,#fff);
}
.box > div:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: right/1000% 100%;
background-image:inherit;
animation: ani 2s linear infinite;
}
.box > div:hover:before {
animation-play-state:paused;
}
#keyframes ani {
100% {
background-position:left;
}
}
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<br>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
I'm trying to animate a car using CSS. I've managed to animate the wheels and the car.
The car moves in and stops and then moves off. this animation loops.
Now, I need to stop the wheels as well when then car stops. But I can't seem to achieve that.
This is what I have so far:
#keyframes wheel{
0%{
transform: rotate(0deg)
}
35% {
transform: rotate(-90deg)
}
36%,
56% {
transform: rotate(-180deg)
}
100%{
transform: rotate(-359deg)
}
}
#keyframes moving {
0% {
right: -80em;
animation-timing-function: ease-out;
}
35% {
right: 0;
}
36%,
56% {
right: 0;
animation-timing-function: ease-in;
}
100% {
right: 120%;
}
}
#keyframes stableWheel {
from {transform: translateY(-.0em);}
to {transform: translateY(-.0em);}
}
.car{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 auto;
position: relative;
width: 600px;
height:271px;
overflow:hidden;
animation: moving 10s linear -2s infinite;
}
.carbody{
animation: carmove 3.1s infinite linear;
background: url('https://i.stack.imgur.com/xWNOG.png') 0 0;
background-size: cover;
height: 271px;
position: relative;
width: 600px;
z-index: 125;
}
.weel{
animation: wheel 0.7s infinite linear;
background: url('https://i.stack.imgur.com/0Osjx.png') 0 0;
height: 85px;
position: absolute;
top: 67%;
width: 85px;
z-index: 200;
}
.weel1{left: 85px;}
.weel2{left: 454px;}
/*animations*/
#keyframes carmove{
0%{transform: translateY(0px);}
25%{transform: translateY(1px)}
29%{transform: translateY(2px)}
33%{transform: translateY(3px)}
47%{transform: translateY(0px)}
58%{transform: translateY(1px)}
62%{transform: translateY(2px)}
66%{transform: translateY(3px)}
75%{transform: translateY(1px)}
100%{transform: translateY(0px)}
}
body {
-webkit-animation: color-fade 10s infinite;
-moz-animation: color-fade 10s infinite;
animation: color-fade 10s infinite;
}
#-webkit-keyframes color-fade {
0% { background: #9a5342; }
25% { background: #fffc0c; }
50% { background: #e46d00; }
75% { background: #ff3506; }
100% { background: #9a5342; }
}
.stopedWeel{
animation: stableWheel .2s linear infinite alternate;
}
<div class="car">
<div class="carbody"></div>
<div class="weel weel1"></div>
<div class="weel weel2"></div>
</div>
The wheels animation is this:
#keyframes wheel{
0%{
transform: rotate(0deg)
}
35% {
transform: rotate(-90deg)
}
36%,
56% {
transform: rotate(-180deg)
}
100%{
transform: rotate(-359deg)
}
}
if you run my code, the wheels are all jittery and lagging.
Could someone please advice on this?
To make it easier, use the same duration for both animation then increase the angle of rotation to control the wheel. Simply make sure you get back to n*360deg at then end (not mandatory in this case since there is no cycle in the car movement)
I also optimized your code to use percentage value so you can easily control the whole car by simply adjusting the width of the main element:
.car{
margin: 0 auto;
position: relative;
width: 400px;
animation: moving 10s linear -2s infinite;
}
.car:before {
content:"";
display:block;
animation: carmove 3.1s infinite linear;
background: url('https://i.stack.imgur.com/xWNOG.png') center/cover;
padding-top:45.25%;
}
.weel{
animation: wheel 10s infinite -2s linear;
background: url('https://i.stack.imgur.com/0Osjx.png') center/cover;
position: absolute;
bottom:0.8%;
width: 14.15%;
}
.weel:before {
content:"";
display:block;
padding-top:100%;
}
.weel1{left: 14.5%;}
.weel2{right: 10%;}
/*animations*/
#keyframes carmove{
0%{transform: translateY(0px);}
25%{transform: translateY(1px)}
29%{transform: translateY(2px)}
33%{transform: translateY(3px)}
47%{transform: translateY(0px)}
58%{transform: translateY(1px)}
62%{transform: translateY(2px)}
66%{transform: translateY(3px)}
75%{transform: translateY(1px)}
100%{transform: translateY(0px)}
}
#keyframes wheel{
0%{
transform: rotate(0deg)
}
35% {
transform: rotate(-920deg)
}
36%,
56% {
transform: rotate(-920deg)
}
100%{
transform: rotate(-1440deg)
}
}
#keyframes moving {
0% {
right: -80em;
animation-timing-function: ease-out;
}
35% {
right: 0;
}
36%,
56% {
right: 0;
animation-timing-function: ease-in;
}
100% {
right: 120%;
}
}
body {
overflow:hidden;
}
<div class="car">
<div class="weel weel1"></div>
<div class="weel weel2"></div>
</div>
And a smaller car:
.car{
margin: 0 auto;
position: relative;
width: 150px;
animation: moving 10s linear -2s infinite;
}
.car:before {
content:"";
display:block;
animation: carmove 3.1s infinite linear;
background: url('https://i.stack.imgur.com/xWNOG.png') center/cover;
padding-top:45.25%;
}
.weel{
animation: wheel 10s infinite -2s linear;
background: url('https://i.stack.imgur.com/0Osjx.png') center/cover;
position: absolute;
bottom:0.8%;
width: 14.15%;
}
.weel:before {
content:"";
display:block;
padding-top:100%;
}
.weel1{left: 14.5%;}
.weel2{right: 10%;}
/*animations*/
#keyframes carmove{
0%{transform: translateY(0px);}
25%{transform: translateY(1px)}
29%{transform: translateY(2px)}
33%{transform: translateY(3px)}
47%{transform: translateY(0px)}
58%{transform: translateY(1px)}
62%{transform: translateY(2px)}
66%{transform: translateY(3px)}
75%{transform: translateY(1px)}
100%{transform: translateY(0px)}
}
#keyframes wheel{
0%{
transform: rotate(0deg)
}
35% {
transform: rotate(-920deg)
}
36%,
56% {
transform: rotate(-920deg)
}
100%{
transform: rotate(-1440deg)
}
}
#keyframes moving {
0% {
right: -80em;
animation-timing-function: ease-out;
}
35% {
right: 0;
}
36%,
56% {
right: 0;
animation-timing-function: ease-in;
}
100% {
right: 120%;
}
}
body {
overflow:hidden;
}
<div class="car">
<div class="weel weel1"></div>
<div class="weel weel2"></div>
</div>
SVG Animation
Scenario
The car appears on the right.
Wheels spin
Car stop in the middle of the road.
Wheels do not spin
The car rides again.
Wheels spin
Repetition of the whole cycle
Why did I write this primitive algorithm? Only in order to clearly follow it in the order of launching parallel and sequential animations.
Unlike CSS animations in SVG you can do without painstaking timing calculations..
And as it is written in the scenario so, and implement the start, stop animations
For example:
A pause follows after the end of the movement on the first leg
begin="an_move1.end"
Movement on the second section of the path will begin after pause
begin="an_pause.end"
See the code comments for more explanations.
body {
-webkit-animation: color-fade 10s infinite;
-moz-animation: color-fade 10s infinite;
animation: color-fade 10s infinite;
}
#-webkit-keyframes color-fade {
0% { background: #9a5342; }
25% { background: #fffc0c; }
50% { background: #e46d00; }
75% { background: #ff3506; }
100% { background: #9a5342; }
}
.container {
width:100%;
height:100%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1200" height="600" viewBox="0 0 600 800" preserveAspectRatio="xMinYMin meet">
<!-- Car -->
<g id="car" transform="translate(-2400,0)">
<image xlink:href="https://i.stack.imgur.com/xWNOG.png" width="100%" height="100%" />
<g id="wheel_left" transform=" translate(85,430) scale(0.145)" >
<image xlink:href="https://i.stack.imgur.com/0Osjx.png" width="100%" height="100%" >
<!-- Left wheel rotation animation -->
<animateTransform
id="an_left"
attributeName="transform"
type="rotate"
begin="0s;6s;16s;26s;36s;46s;56s"
end="an_pause.begin"
values="
0 300 400;
-360 300 400"
dur="1s"
repeatCount="indefinite"
/>
</image>
</g>
<g id="wheel_right" transform=" translate(455,430) scale(0.145)" >
<image xlink:href="https://i.stack.imgur.com/0Osjx.png" width="100%" height="100%" >
<!-- Right wheel rotation animation -->
<animateTransform
id="an_right"
attributeName="transform"
type="rotate"
begin="0s;6s;16s;26s;36s;46s;56s;66s;76s"
end="an_pause.begin"
values="
0 300 400;
-360 300 400"
dur="1s"
repeatCount="indefinite"
/>
</image>
</g>
</g>
<!-- Animation of a car moving to a stop -->
<animateTransform
id="an_move1"
xlink:href="#car"
attributeName="transform"
type="translate"
begin="0s;an_move2.end"
values="2400;800"
dur="4s"
fill="freeze"
repeatCount="1"
/>
<!-- Car move pause -->
<animateTransform
id="an_pause"
xlink:href="#car"
attributeName="transform"
type="translate"
begin="an_move1.end"
values="800"
dur="2s"
fill="freeze"
repeatCount="1"
/>
<!-- Animation of a car moving after a stop -->
<animateTransform
id="an_move2"
xlink:href="#car"
attributeName="transform"
type="translate"
begin="an_pause.end"
values="800;-600"
dur="4s"
fill="freeze"
repeatCount="1"
/>
</svg>
</div>
At the middle of the view screen both car and wheel animations should be stopped few seconds. So wheel animation should be same as car's animation.
.car{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 auto;
position: relative;
width: 600px;
height:271px;
overflow:hidden;
animation: moving 10s linear -2s infinite;
}
Updated wheel styles should be looked like below.
.weel{
/*animation: wheel 0.7s infinite linear;*/
animation: wheel 10s linear -2s infinite;
background: url('https://i.stack.imgur.com/0Osjx.png') 0 0;
height: 85px;
position: absolute;
top: 67%;
width: 85px;
z-index: 200;
}
If you run the code now you can see wheel and car animate works simultaneously. But there you can find a difference between car speed and wheel speed and wheel should be stopped until car body moves again. For fix that speed and wheel issues, you need to increase keyframe values while keep middle two keyframe values equal.
#keyframes wheel{
0%{
transform: rotate(0deg)
}
35% {
transform: rotate(-500deg)
}
36%,
56% {
transform: rotate(-500deg)
}
100%{
transform: rotate(-1000deg)
}
}
This Js Fiddle link shows the live animation.
#home {
height: 100vh;
background-image: url("http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
padding: 0;
margin-left: -10px;
}
.background {
overflow: hidden;
}
#fg {
fill: pink;
stroke: #fff;
stroke-width: 10px;
stroke-dasharray: 1024px;
-webkit-animation: dash 2s;
animation: dash 2s;
}
#keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#bg {
fill: white;
stroke: none;
transform-origin: 1270px 550px;
-webkit-animation: bgfill 2s linear 2s forwards;
animation: bgfill 2s linear 2s forwards;
}
#keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
#-webkit-keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
<div id="home" class="section" style="height:100vh;">
<div class="background">
<svg viewBox="0 0 1376 764">
<defs>
<path id="shape" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5 L 1376,770.5 Z" />
</defs>
<use xlink:href="#shape" id="bg" />
<use xlink:href="#shape" id="fg" />
</svg>
</div>
</div>
I can not seem to make the background image visible at all times while remaining the same effect, making the fill transparent gets rid of the animation, I also tried to play around with z-index on various elements but without success, how can I make it so that the background image is visible inside the white line instead of the pink svg?
I also tried applying the same image to the pink SVG as fill and it kind of works, I just can not seem to make the image appear like how it would if it was full screen, it also makes the page a bit slow:
#fg {
fill: url(#image);
stroke: #fff;
stroke-width: 10px;
stroke-dasharray: 1024px;
-webkit-animation: dash 2s;
animation: dash 2s;
}
<pattern id="image" width="1" height="1">
<image xlink:href="http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg"></image>
</pattern>
You can get rid of the pink with fill-opacity. But you would need to adjust the white "background" as it overlays the background-image.
You might need to change the shape for that.
You could also include the image as a layer in the svg.
#home {
height: 100vh;
background-image: url("http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
padding: 0;
margin-left: -10px;
}
.background {
overflow: hidden;
}
#fg {
fill: pink;
fill-opacity: 0;
stroke: #fff;
stroke-width: 10px;
stroke-dasharray: 1024px;
-webkit-animation: dash 2s;
animation: dash 2s;
}
#keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#bg {
fill: white;
opacity: .5;
stroke: none;
transform-origin: 1270px 550px;
-webkit-animation: bgfill 2s linear 2s forwards;
animation: bgfill 2s linear 2s forwards;
}
#keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
#-webkit-keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
<div id="home" class="section" style="height:100vh;">
<div class="background">
<svg viewBox="0 0 1376 764">
<defs>
<path id="shape" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5 L 1376,770.5 Z" />
</defs>
<use xlink:href="#shape" id="bg" />
<use xlink:href="#shape" id="fg" />
</svg>
</div>
</div>
SVG width attribute css animation not working in Firefox but in chrome it working perfectly. Please check the below snippet demo.
Does any wrong in my codes? Is there a way to apply the animation over the attribute width?
svg {
display: inline-block;
}
#-moz-keyframes glareAnim1 {
0% {
width: 0;
}
50% {
width: 10px;
}
100% {
width: 0;
}
}
#-webkit-keyframes glareAnim1 {
0% {
width: 0;
}
50% {
width: 10px;
}
100% {
width: 0;
}
}
#keyframes glareAnim1 {
0% {
width: 0;
}
50% {
width: 10px;
}
100% {
width: 0;
}
}
.glare-top {
-moz-animation: glareAnim1 2s linear infinite;
-webkit-animation: glareAnim1 2s linear infinite;
animation: glareAnim1 2s linear infinite;
}
#-moz-keyframes glareAnim2 {
0% {
width: 10px;
}
50% {
width: 0;
}
100% {
width: 10px;
}
}
#-webkit-keyframes glareAnim2 {
0% {
width: 10px;
}
50% {
width: 0;
}
100% {
width: 10px;
}
}
#keyframes glareAnim2 {
0% {
width: 10px;
}
50% {
width: 0;
}
100% {
width: 10px;
}
}
.glare-bottom {
-moz-animation: glareAnim2 2s linear infinite;
-webkit-animation: glareAnim2 2s linear infinite;
animation: glareAnim2 2s linear infinite;
}
#-moz-keyframes translateDoor {
0% {
-moz-transform: translate(-1px, 0);
transform: translate(-1px, 0);
opacity: 1;
width: 1px;
height: 6px;
}
15% {
width: 4px;
}
50% {
-moz-transform: translate(16px, 0);
transform: translate(16px, 0);
opacity: 1;
width: 2px;
}
51% {
opacity: 0;
}
100% {
-moz-transform: translateX(-10px);
transform: translateX(-10px);
opacity: 0;
}
}
#-webkit-keyframes translateDoor {
0% {
-webkit-transform: translate(-1px, 0);
transform: translate(-1px, 0);
opacity: 1;
width: 1px;
height: 6px;
}
15% {
width: 4px;
}
50% {
-webkit-transform: translate(16px, 0);
transform: translate(16px, 0);
opacity: 1;
width: 2px;
}
51% {
opacity: 0;
}
100% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
opacity: 0;
}
}
#keyframes translateDoor {
0% {
-moz-transform: translate(-1px, 0);
-ms-transform: translate(-1px, 0);
-webkit-transform: translate(-1px, 0);
transform: translate(-1px, 0);
opacity: 1;
width: 1px;
height: 6px;
}
15% {
width: 4px;
}
50% {
-moz-transform: translate(16px, 0);
-ms-transform: translate(16px, 0);
-webkit-transform: translate(16px, 0);
transform: translate(16px, 0);
opacity: 1;
width: 2px;
}
51% {
opacity: 0;
}
100% {
-moz-transform: translateX(-10px);
-ms-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
opacity: 0;
}
}
.researchDoor {
fill: #464949;
-moz-animation: translateDoor 5s linear infinite;
-webkit-animation: translateDoor 5s linear infinite;
animation: translateDoor 5s linear infinite;
}
.research0 {
fill: #FFFFFF;
stroke: #464949;
stroke-width: 2;
stroke-miterlimit: 10;
}
.research1 {
fill: #FCBD38;
overflow: hidden;
}
.research2 {
fill: #464949;
}
.research3 {
fill: none;
stroke: #464949;
stroke-width: 2;
stroke-linecap: square;
stroke-miterlimit: 10;
}
<svg version="1.1" x="0px" y="0px" viewBox="0 0 100 120" style="enable-background:new 0 0 100 120;" xml:space="preserve">
<path id="XMLID_42_" class="research0" d="M57.9,25.5c-3-6.4-8.3-11.6-8.3-11.6c-5.1,5-8.3,11.5-8.3,11.5v5.8L57.7,32L57.9,25.5z" />
<g id="XMLID_40_">
<rect x="41.4" y="25.9" class="research1" width="16.3" height="11.5" />
<path class="research2" d="M56.7,26.9v9.5H42.4v-9.5H56.7 M58.7,24.9H40.4v13.5h18.3V24.9L58.7,24.9z" />
</g>
<polygon id="XMLID_43_" class="research3" points="33.5,85.2 40.8,37.7 58.8,37.7 66.2,85.2 " />
<!-- door -->
<rect x="41" y="28.9" class="researchDoor" />
<!-- left top wind -->
<rect x="30" class="glare-top" y="28" fill="#464949" width="14" height="2" />
<!-- left bottom wind -->
<rect x="30" class="glare-bottom" y="32" fill="#464949" width="14" height="2" />
<!-- right top wind -->
<rect x="62" y="28" class="glare-top" fill="#464949" width="14" height="2" />
<!-- right bottom wind -->
<rect x="62" y="32" class="glare-bottom" fill="#464949" width="14" height="2" />
<!--
<line id="glareLeftTop" class="research3" x1="36.6" y1="28.7" x2="32.8" y2="28.7"/>
<line id="glareLeftBottom" class="research3" x1="36.6" y1="33.3" x2="23.8" y2="33.3"/>
<line id="glareTopRight" class="research3" x1="62.9" y1="28.7" x2="66.6" y2="28.7"/>
<line id="glareTopBottom" class="research3" x1="62.9" y1="33.3" x2="75.6" y2="33.3"/>
-->
<line id="XMLID_2_" class="research3" x1="76.3" y1="85.3" x2="23.7" y2="85.3" />
<line id="XMLID_64_" class="research3" x1="60.7" y1="37.7" x2="38.8" y2="37.7" />
<line id="XMLID_70_" class="research3" x1="58.7" y1="44.3" x2="40.8" y2="44.3" />
<line id="XMLID_79_" class="research3" x1="60.2" y1="51.7" x2="39.3" y2="51.7" />
<line id="XMLID_80_" class="research3" x1="61.7" y1="61" x2="37.8" y2="61" />
<line id="XMLID_90_" class="research3" x1="63.5" y1="69.3" x2="36.8" y2="69.3" />
<g id="XMLID_49_">
<path class="research2" d="M49.8,76.2c1.5,0,2.8,1.2,2.8,2.8v5.2H47v-5.2C47,77.4,48.2,76.2,49.8,76.2 M49.8,74.2
c-2.6,0-4.8,2.1-4.8,4.8v7.2h9.5v-7.2C54.5,76.3,52.4,74.2,49.8,74.2L49.8,74.2z" />
</g>
</svg>
Consider using lines with a stroke-width equal to the height of the rectangles instead of rectangles in your animation.
The stroke-dasharray lines will be used for animation.
At 0% {stroke-dasharray: 0.10;} for an animated line equal to 10px
the line will be hidden
At 50% {stroke-dasharray: 10,0;} the line will be shown in full
At 100% {stroke-dasharray: 0.10;} the line will be hidden again
.glare-top {
-webkit-animation: glareAnim1 2s linear infinite;
stroke-dasharray:0,10;
animation: glareAnim1 2s linear infinite;
}
#-webkit-keyframes glareAnim1 {
0% {stroke-dasharray:0,10;}
50% {stroke-dasharray:10,10;}
100%{stroke-dasharray:0,10;}
}
.glare-bottom {
-webkit-animation: glareAnim2 2s linear infinite;
stroke-dasharray:0,10;
animation: glareAnim2 2s linear infinite;
}
#-webkit-keyframes glareAnim2 {
0% {stroke-dasharray:10,0;}
50% {stroke-dasharray:0,10;}
100%{stroke-dasharray:10,0;}
}
<svg version="1.1" viewBox="0 0 100 120" >
<!-- left top wind -->
<polyline class="glare-top" points="27,28 37,28" stroke="#464949" stroke-width="2" />
<!-- left bottom wind -->
<polyline class="glare-bottom" points="27,33 37,33" stroke="#464949" stroke-width="2" />
</svg>
I have shortened your code to show the basic animation of the lines and the door.
svg {
display: inline-block;
}
.glare-top {
-webkit-animation: glareAnim1 2s linear infinite;
stroke-dasharray:0,10;
animation: glareAnim1 2s linear infinite;
}
#-webkit-keyframes glareAnim1 {
0% {stroke-dasharray:0,10;}
50% {stroke-dasharray:10,10;}
100%{stroke-dasharray:0,10;}
}
#keyframes glareAnim1 {
0% {stroke-dasharray:0,10;}
50% {stroke-dasharray:10,10;}
100%{stroke-dasharray:0,10;}
}
.glare-bottom {
-moz-animation: glareAnim2 2s linear infinite;
-webkit-animation: glareAnim2 2s linear infinite;
stroke-dasharray:0,10;
animation: glareAnim2 2s linear infinite;
}
#-webkit-keyframes glareAnim2 {
0% {stroke-dasharray:10,0;}
50% {stroke-dasharray:0,10;}
100%{stroke-dasharray:10,0;}
}
#keyframes glareAnim2 {
0% {stroke-dasharray:10,0;}
50% {stroke-dasharray:0,10;}
100%{stroke-dasharray:10,0;}
}
.researchDoor {
fill: #464949;
stroke-dasharray:0,6;
animation: translateDoor 5s linear infinite;
}
#keyframes translateDoor {
0% {
transform: translate(-1px, 0);
opacity: 1;
stroke-dasharray:0,6;
}
15% {
stroke-dasharray:1.4,4.6;
}
50% {
transform: translate(8px, 0);
stroke-dasharray:5,1;
}
70% {
transform: translate(12.8px, 0);
stroke-dasharray:3.5,2.5;
}
100% {
transform: translateX(16px);
stroke-dasharray:0,6;
}
}
.research0 {
fill: #FFFFFF;
stroke: #464949;
stroke-width: 2;
stroke-miterlimit: 10;
}
.research1 {
fill: #FCBD38;
overflow: hidden;
}
.research2 {
fill: #464949;
}
.research3 {
fill: none;
stroke: #464949;
stroke-width: 2;
stroke-linecap: square;
stroke-miterlimit: 10;
}
<svg version="1.1" viewBox="0 0 100 120" >
<path id="XMLID_42_" class="research0" d="M57.9,25.5c-3-6.4-8.3-11.6-8.3-11.6c-5.1,5-8.3,11.5-8.3,11.5v5.8L57.7,32L57.9,25.5z" />
<g id="XMLID_40_">
<rect x="41.4" y="25.9" class="research1" width="16.3" height="11.5" />
<path class="research2" d="M56.7,26.9v9.5H42.4v-9.5H56.7 M58.7,24.9H40.4v13.5h18.3V24.9L58.7,24.9z" />
</g>
<polygon id="XMLID_43_" class="research3" points="33.5,85.2 40.8,37.7 58.8,37.7 66.2,85.2 " />
<!-- door -->
<!-- <rect x="41" y="28.9" class="researchDoor" /> -->
<polyline class="researchDoor" points="41,32 47,32" stroke="#464949" stroke-width="6" />
<!-- left top wind -->
<polyline class="glare-top" points="27,28 37,28" stroke="#464949" stroke-width="2" />
<!-- right top wind -->
<polyline class="glare-top" points=" 62,28 72,28" stroke="#464949" stroke-width="2" />
<!-- left bottom wind -->
<polyline class="glare-bottom" points="27,33 37,33" stroke="#464949" stroke-width="2" />
<!-- right bottom wind -->
<polyline class="glare-bottom" points=" 62,33 72,33" stroke="#464949" stroke-width="2" />
<line id="XMLID_2_" class="research3" x1="76.3" y1="85.3" x2="23.7" y2="85.3" />
<line id="XMLID_64_" class="research3" x1="60.7" y1="37.7" x2="38.8" y2="37.7" />
<line id="XMLID_70_" class="research3" x1="58.7" y1="44.3" x2="40.8" y2="44.3" />
<line id="XMLID_79_" class="research3" x1="60.2" y1="51.7" x2="39.3" y2="51.7" />
<line id="XMLID_80_" class="research3" x1="61.7" y1="61" x2="37.8" y2="61" />
<line id="XMLID_90_" class="research3" x1="63.5" y1="69.3" x2="36.8" y2="69.3" />
<g id="XMLID_49_">
<path class="research2" d="M49.8,76.2c1.5,0,2.8,1.2,2.8,2.8v5.2H47v-5.2C47,77.4,48.2,76.2,49.8,76.2 M49.8,74.2
c-2.6,0-4.8,2.1-4.8,4.8v7.2h9.5v-7.2C54.5,76.3,52.4,74.2,49.8,74.2L49.8,74.2z" />
</g>
</svg>
In SVG 1.1 width is an attribute and cannot be animated with CSS animation.
In the SVG 2 specification width is a CSS property which can therefore be animated with CSS animation.
Chrome has implemented this part of the SVG 2 specification, Firefox had not when this question was first written, but it has now. In fact Firefox has had this functionality for quite a while now.
So I'm getting acquainted with css3 and I've been trying to find a purely css slider. I finally found one that is exactly as I was looking for on code pen but for some reason when I try the code in localhost or jsfiddle it doesn't work. There is no external files that its accessing as far as I can tell in codepen and there is no jQuery needed. Below I've linked the (working) codepen and jsfiddle. Any ideas why it wont work elsewhere?
codepen
jsFiddle
html
<div class="slider">
<img class='photo' src="http://i.imgur.com/zMGSiyl.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/soQhb13.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/39yOaYB.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/tnctKD4.jpg" alt="" />
</div>
css
body{background:#000;}
.slider{
margin:50px auto;
width:100%;
height:300px;
overflow:hidden;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
opacity:0;
width:100%;
}
#keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
You may need to use vendor specific keyframes. Codepen is clever and is overcompensating in this instance.
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
More info http://css-tricks.com/snippets/css/keyframe-animation-syntax/
This works perfectly, please check: jsFiddle Demo. The syntax for the CSS3 animations and the keyframes which was being used in the code was the standard syntax, for e.g. animation:round 16s infinite;, #keyframes round{ 25%{opacity:1;} 40%{opacity:0;} } and img:nth-child(4){animation-delay:0s;}.
You should instead use -webkit-animation:round 16s infinite;`, `#-webkit-keyframes round{ 25%{opacity:1;} 40%{opacity:0;} } ` and `img:nth-child(4){-webkit-animation-delay:0s;} so that it's browser compatible.
More information on this is available over here.
body {
background: #000;
}
.slider {
margin: 50px auto;
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.photo {
position: absolute;
-webkit-animation: round 16s infinite;
-moz-animation: round 16s infinite;
-o-animation: round 16s infinite;
animation: round 16s infinite;
opacity: 0;
width: 100%;
}
#-webkit-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
#-moz-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
#-o-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(4) {
-webkit-animation-delay: 0s;
}
img:nth-child(3) {
-webkit-animation-delay: 4s;
}
img:nth-child(2) {
-webkit-animation-delay: 8s;
}
img:nth-child(1) {
-webkit-animation-delay: 12s;
}
<div class="slider">
<img class='photo' src="http://i.imgur.com/zMGSiyl.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/soQhb13.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/39yOaYB.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/tnctKD4.jpg" alt="" />
</div>