Safari CSS3 SVG animations not working...

Question

im doing the course and for some reason i can get the animation to fully work in safari im really REALLY wondering WHY :(

Any ideas Guil Hernandez

this is my code:

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">

    <script src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
    <div class="widgetContainer">
        <svg class="badge" xmlns="http://www.w3.org/2000/svg" height="440" width="440" viewBox="-40 -40 440 440">
            <circle class="outer" fill="#F9D535" stroke="#fff" stroke-width="8" stroke-linecap="round" cx="180" cy="180" r="157"/>
            <circle class="round" fill="#DFB828" stroke="#fff" stroke-width="8" cx="180" cy="180" r="108.3"/>
            <path class="inline" d="M89.4 276.7c-26-24.2-42.2-58.8-42.2-97.1 0-22.6 5.6-43.8 15.5-62.4m234.7.1c9.9 18.6 15.4 39.7 15.4 62.2 0 38.3-16.2 72.8-42.1 97" stroke="#CAA61F" stroke-width="7" stroke-linecap="round" fill="none"/>
            <g class="star">
                <path fill="#F9D535" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z"/>
                <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="180" cy="107.8" r="4.4"/>
                <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="223.7" cy="244.2" r="4.4"/>
                <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="135.5" cy="244.2" r="4.4"/>
                <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="108.3" cy="160.4" r="4.4"/>
                <circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="251.7" cy="160.4" r="4.4"/>
            </g>
          </svg>
          <div class="start"> Start Animation </div>
    </div>
</body>
</html>

/* --------------------------
  Base
--------------------------- */
@font-face
{
    font-family: oduda;
    src: url("../fonts/Oduda-Bold-4.otf");
}

*{
    font-family: oduda, Helvetica;
    font-weight: bolder;
    -webkit-tap-highlight-color:rgba(255,0,0,0);
}

body {
    background: #8069a1;
    padding-top: 60px;
}

svg {
    margin: auto;
    display: block;
}

.widgetContainer{
    width: 1024px;
    height: 768px;
    position: relative;
}

/* --------------------------
  Keyframes
--------------------------- */

@-webkit-keyframes grow{
    0%{
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    30%{
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    60%{
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@-webkit-keyframes turn{
    0%
    {
        -webkit-transform: rotate(0) scale(0);
        transform: rotate(0) scale(0);
        opacity: 0;
    }

    60%
    {
        -webkit-transform: rotate(375deg) scale(1.1);
        transform: rotate(375deg) scale(1.1);
    }

    80%
    {
        -webkit-transform: rotate(355deg) scale(0.9);
        transform: rotate(355deg) scale(0.9);
    }

    100%
    {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}

@-webkit-keyframes pulse{
    50%{
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
    }
}

/* --------------------------
  SVG Styles
--------------------------- */

.badge *{
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.outer,
.inner,
.inline{
    -webkit-animation: grow 1s ease-out backwards;
    animation: grow 1s ease-out backwards;
}

.inner{
    -webkit-animation-delay: .1s;
    animation-delay: .1s;
}

.inline{
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}

.star{
    -webkit-animation: turn 1.1s .2s ease-out backwards;
    animation: turn 1.1s .2s ease-out backwards;
}

.star circle{
    -webkit-animation: pulse .7s 1.5s;
    animation: pulse .7s 1.5s;
}

    .star circle:nth-child(2){
        -webkit-animation-delay: 1.6s;
        animation-delay: 1.6s;
    }
    .star circle:nth-child(3){
        -webkit-animation-delay: 1.7s;
        animation-delay: 1.7s;
    }
    .star circle:nth-child(4){
        -webkit-animation-delay: 1.8s;
        animation-delay: 1.8s;
    }
    .star circle:nth-child(5){
        -webkit-animation-delay: 1.9s;
        animation-delay: 1.9s;
    }

.start{
    height: 105px;
    width: 280px;
    font-size: 50px;
    color: white;
    text-align: center;
    text-transform: uppercase;
    background-color: #F9D535;
    border: #fff solid 8px;
    line-height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 100px;
}

Answer 1 · 2015-07-10T20:47:04Z

July 10, 2015 8:47pm

Transform is an experimental technology and requires vendor prefixes. Look here under browser compatibility for the various prefixes.

Answer 2 · 2015-07-11T05:05:46Z

July 11, 2015 5:05am

Will you please post a snapshot so I can look at your full code and see if it works for me? If it does, we know it is prefixes.

Answer 3 · 2015-07-11T13:23:39Z

July 11, 2015 1:23pm

I am going to start by highlighting differences between your css and the final css of the class. One thing to note is that you have vendor prefixes, but you do not have the same code without prefixes. I don't know if that makes any difference, but it might.

The @fontface and wigetContainer sections are not in the final product.

But your code runs fine on my Linux computer in Chrome, so the issue has to be in the browser support or the vendor prefixes. In doing more research into the prefix issue, you should be running Safari 8.0.7 which should support this with no problem. The MDN page says Safari 4 needs prefixes.

Since it runs fine on my computer, you may have a cache issue. Try clearing the cache and seeing if it runs. And since it runs on Chrome it doesn't seem likely it is a prefix issue.

My daughter has a Mac. I will try your code on her computer in a little while.

Answer 4 · 2015-07-11T14:17:44Z

July 11, 2015 2:17pm

I have the same behavior on my daughter's Mac, so it is a code issue.

Answer 5 · 2015-07-11T14:33:20Z

July 11, 2015 2:33pm

When I comment out the Keyframes the star is there. So I am going to slowly comment things back in until it disappears so we will know exactly where the problem is. Then we can figure out what is wrong and how to fix it.

I brought back the first keyframe and the star is still there.

When pulse is out and turn is in, the star is gone.

When pulse is in and turn is out, the star is back and the tips of the star pulse. So we know the problem is in the turn.

I commented out half at a time of the problem keyframe until I narrowed it down to your opacity in the 0%. I will let you debug from here to make it look like what you want. I suspect that the opacity remains 0 so you cannot see it throughout the sequence.

Answer 6 · 2016-03-16T10:04:26Z

March 16, 2016 10:04am

<circle class="round" fill="#DFB828" stroke="#fff" stroke-width="8" cx="180" cy="180" r="108.3"/>

In the HTML for the inline SVG element, you've set the class to 'round'. So some of your CSS rules are not applying to this circle.

Set the class to 'inner' as the video specifies and it should help debug the issue!

Hope that helps :)

Welcome to the Treehouse Community

Looking to learn something new?

Esmobrander Ozpedelamo

Esmobrander Ozpedelamo

Safari CSS3 SVG animations not working...

6 Answers

Ted Sumner

Ted Sumner

Esmobrander Ozpedelamo

Esmobrander Ozpedelamo

Ted Sumner

Ted Sumner

Ted Sumner

Ted Sumner

Esmobrander Ozpedelamo

Esmobrander Ozpedelamo

Ted Sumner

Ted Sumner

Ted Sumner

Ted Sumner

Ted Sumner

Ted Sumner

Nick Field

Nick Field