Css动画没有效果 |h5 css3简单动画

/* CSS代码 */
.animation {
animation-name: myAnimation;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes myAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

1. CSS代码书写错误

/* CSS代码错误 */
.animation {
animation-nam: myAnimation;
animation-duration: 2;
animation-iterationcoun: infinite;
}
@keyfram myAnimation {
from {
opactity: 1;
}
to {
opactity: 0;
}
}

在CSS动画使用过程中，容易出现拼写错误、语法错误等问题，在这里大家需要注意代码的书写错误，例如animation-name中的“nam”应该是“name”，animation-duration中的“2”应该是“2s”，animation-iteration-count中的“coun”应该是“count”。

2. 元素属性冲突

/* CSS代码 */
.animation {
position: relative;
animation-name: myAnimation;
animation-duration: 2s;
animation-iteration-count: infinite;
}
/* HTML代码 */

在元素样式中，可能存在属性冲突的问题。例如上述代码片段中，在CSS样式中设定了元素的position为relative，但是在HTML代码中又设置了position为absolute，这时候就会出现样式冲突的问题，从而导致CSS动画没有效果。

3. 兼容性问题

/* CSS代码 */
.animation {
animation-name: myAnimation;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes myAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* IE浏览器兼容性代码 */
@-ms-keyframes myAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-ms-keyframes myAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

在不同的浏览器中，对于CSS动画的支持程度也是不同的。例如IE浏览器就需要特殊处理，使用@-ms-keyframes和@-ms-animation属性来实现CSS动画效果，否则就会出现CSS动画无效的问题。

综上所述，大家需要注意CSS代码的书写错误、元素属性的冲突问题、以及浏览器的兼容性问题，这三个方面是CSS动画无效的主要原因，大家需要在开发过程中注意这些问题，才能保证CSS动画的有效性。