CODEWITHSUNDEEP
htmlcsscss-animationscss-transforms
Henry Zhu
Henry Zhu

Reputation: 2618

Safari Webkit Transitions don't work

I have struggling to understand why my circle animation for my website works perfectly for browsers such as Chrome, IE, Opera, and Firefox, but fails to work for Safari.

JSFiddle

Website

.circle {
    width: 45%;
}
.circle:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
}
.circle div {
    float: left;
    width: 100%;
    padding-top: 50%;
    line-height: 40px;
    margin-top: -20px;
    text-align: center;
}
.circle div span {
	font-size: 50px;
}
.circle .desc {
	font-size: 20px;
	line-height: 29px;
	text-align: center;
}
#left:hover {
    animation: sway 2s infinite ease-in-out;
    -webkit-animation: sway 2s infinite ease-in-out;
    -moz-animation: sway 2s infinite ease-in-out;
    -o-animation: sway 2s infinite ease-in-out;
}
#right:hover {
	animation: swayClock 2s infinite ease-in-out;
    -webkit-animation: swayClock 2s infinite ease-in-out;
    -moz-animation: swayClock 2s infinite ease-in-out;
    -o-animation: swayClock 2s infinite ease-in-out;
}
@keyframes sway {
    0% {
        transform: rotate(0deg);
    }
	100% { transform: rotate(-360deg);
    -webkit-transform: -webkit-rotate(-360deg);
    -ms-transform: -ms-rotate(-360deg);
    -moz-transform: -moz-rotate(-360deg);
    -o-transform: -o-rotate(-360deg);
    }
}
@-webkit-keyframes sway {
    0% {
        transform: rotate(0deg);
    }
	100% { transform: rotate(-360deg);
    -webkit-transform: -webkit-rotate(-360deg);
    -ms-transform: -ms-rotate(-360deg);
    -moz-transform: -moz-rotate(-360deg);
    -o-transform: -o-rotate(-360deg);
    }
}
@keyframes swayClock {
    0% {
        transform: rotate(0deg);
    }
	100% { transform: rotate(360deg);
    -webkit-transform: -webkit-rotate(360deg);
    -ms-transform: -ms-rotate(360deg);
    -moz-transform: -moz-rotate(360deg);
    -o-transform: -o-rotate(360deg);}
}
@-webkit-keyframes swayClock {
    0% {
        transform: rotate(0deg);
    }
	100% { transform: rotate(360deg);
    -webkit-transform: -webkit-rotate(360deg);
    -ms-transform: -ms-rotate(360deg);
    -moz-transform: -moz-rotate(360deg);
    -o-transform: -o-rotate(360deg);}
}
#left {
	float: left;
	padding-right: 5%;
}
#left:after {
	border: 1px solid #2E8AE6;
}
#right {
	float: right;
	padding-left: 5%;
}
#right:after {
	border: 1px solid #FF9900;
}
            <div class="circle" id="left"><div><span>Coding</span><br><p class="desc">I am a strong programmer in <i>Python</i>, <i>Java</i>, <i>Processing</i>, and <i>front-end web development</i>.</p></div></div>
            <div class="circle" id="right"><div><span>Design</span><p class="desc">I have experience in designing <i>sleek</i>, <i>responsive</i> layouts with <i>powerful functionality</i></p></div></div>

Upvotes: 1

Views: 124

Answers (1)

sergdenisov
sergdenisov

Reputation: 8572

Fixed your code:

JSFiddle

.circle {
    width: 45%;
}

.circle:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.circle div {
    float: left;
    width: 100%;
    padding-top: 50%;
    line-height: 40px;
    margin-top: -20px;
    text-align: center;
}

.circle div span {
    font-size: 50px;
}

.circle .desc {
    font-size: 20px;
    line-height: 29px;
    text-align: center;
}

#left:hover {
    -webkit-animation: sway 2s infinite ease-in-out;
    -moz-animation: sway 2s infinite ease-in-out;
    -o-animation: sway 2s infinite ease-in-out;
    animation: sway 2s infinite ease-in-out;
}

#right:hover {
    animation: swayClock 2s infinite ease-in-out;
    -webkit-animation: swayClock 2s infinite ease-in-out;
    -moz-animation: swayClock 2s infinite ease-in-out;
    -o-animation: swayClock 2s infinite ease-in-out;
}

@keyframes sway {
    0% {
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes sway {
    0% {
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@keyframes swayClock {
    0% {
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes swayClock {
    0% {
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#left {
    float: left;
    padding-right: 5%;
}

#left:after {
    border: 1px solid #2E8AE6;
}

#right {
    float: right;
    padding-left: 5%;
}

#right:after {
    border: 1px solid #FF9900;
}
<div class="circle" id="left">
    <div>
        <span>Coding</span>
        <p class="desc">I am a strong programmer in <i>Python</i>, <i>Java</i>, <i>Processing</i>, and <i>front-end web
            development</i>.
        </p>
    </div>
</div>
<div class="circle" id="right">
    <div>
        <span>Design</span>
        <p class="desc">I have experience in designing <i>sleek</i>, <i>responsive</i> layouts with <i>powerful
            functionality</i>
        </p>
    </div>
</div>

Be attentive — there no values: -webkit-rotate, -ms-rotate, -moz-rotate, -o-rotate. The latest versions of other browsers support non-prefixed property transform: rotate() and ignore others, but -webkit-transform: rotate() is needed for Safari.

Upvotes: 2

Related Questions