关于html：Safari Webkit转换不起作用


Safari Webkit Transitions don't work

我一直在努力理解为什么我的网站上的圆圈动画可以完美地用于Chrome，IE，Opera和Firefox之类的浏览器，但是对于Safari无效。

JSFiddle

网站

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
.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 {
\tfont-size: 50px;
}
.circle .desc {
\tfont-size: 20px;
\tline-height: 29px;
\ttext-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 {
\tanimation: 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);
    }
\t100% { 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);
    }
\t100% { 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);
    }
\t100% { 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);
    }
\t100% { transform: rotate(360deg);
    -webkit-transform: -webkit-rotate(360deg);
    -ms-transform: -ms-rotate(360deg);
    -moz-transform: -moz-rotate(360deg);
    -o-transform: -o-rotate(360deg);}
}
#left {
\tfloat: left;
\tpadding-right: 5%;
}
#left:after {
\tborder: 1px solid #2E8AE6;
}
#right {
\tfloat: right;
\tpadding-left: 5%;
}
#right:after {
\tborder: 1px solid #FF9900;
}
1
2
            <span>Coding</span><p class="desc">I am a strong programmer in Python, Java, Processing, and front-end web development.</p>
            <span>Design</span><p class="desc">I have experience in designing sleek, responsive layouts with powerful functionality</p>

相关讨论

修正您的代码：

JSFiddle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
        <span>Coding</span>
        <p class="desc">I am a strong programmer in Python, Java, Processing, and front-end web
            development.
        </p>
   


   
        <span>Design</span>
        <p class="desc">I have experience in designing sleek, responsive layouts with powerful
            functionality
        </p>

注意点-没有值：-webkit-rotate，-ms-rotate，-moz-rotate，-o-rotate。其他浏览器的最新版本支持非前缀属性transform: rotate()并忽略其他属性，但Safari需要使用-webkit-transform: rotate()。