在 Wordpress 站点中使用关键帧进行 CSS 动画/转换

标签 css wordpress css-transforms css-animations

我的一个 CSS 动画有一些问题,但有两个效果很好。他们都在本地工作得很好,但是当我把它放在我的 wordpress 页面上时,有两个 dosent 工作。有人知道问题是什么吗?

我的 CSS(只有动画不起作用):

.start{
-webkit-animation-name: start;
-webkit-animation-duration: 2000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-play-state: running;
-webkit-animation-direction: reverse;

-moz-animation-name: start;
-moz-animation-duration: 2000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
-moz-animation-play-state: running;
-moz-animation-direction: reverse;

-ms-animation-name: start;
-ms-animation-duration: 2000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-in-out;
-ms-animation-play-state: running;
-ms-animation-direction: reverse;

animation-name: start;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-play-state: running;
animation-direction: reverse;


}

@-ms-keyframes start {
from { -ms-transform: translateX(0px); }
50% { -ms-transform: translateX(-100px); }
to { -ms-transform: translateX(0px); }
}
@-moz-keyframes start {
from { -moz-transform: translateX(0px); }
50% { -moz-transform: translateX(-100px); }
to { -moz-transform: translateX(0px); }
}
@-webkit-keyframes start {
from { -webkit-transform: translateX(0px); }
50% { -webkit-transform: translateX(-100px); }
to { -webkit-transform: translateX(0px); }
}
@keyframes start {
from {
    transform: translateX(0px);
}
50% { 
transform: translateX(-100px); 
}
to {
    transform: translateX(0px);
}
}


/*************************
Animationer - stop
**************************/


.stop{
-webkit-animation-name: start;
-webkit-animation-play-state: paused;

-moz-animation-name: start;
-moz-animation-play-state: paused;

-ms-animation-name: start;
-ms-animation-play-state: paused;

animation-name: start;
animation-play-state: paused;
}

最佳答案

对不起,睡一觉对我很好。发现我的 javascript 代码有一点点错误。不知道为什么它在我的电脑上(在 wordpress 之外)仍然有效,但至少我现在发现了问题!

关于在 Wordpress 站点中使用关键帧进行 CSS 动画/转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25125477/

相关文章:

css - 响应式按钮设计

css - 试图覆盖规则

css - 我可以在转换中指定转换属性吗?

javascript - 刷新页面时 Transform scale() 在 Chrome 和 Safari 中不一致

html - 从左上角旋转一个 div,transform-origin 不起作用

Javascript 在点击时更改多个元素样式

html - 自动将单元格宽度调整为 CSS 中的内容并溢出

html - 列出 li 第一个元素 css float 不工作

php - 如何使 $_GET 函数与重写的 url 一起工作?

jquery - 本地主机中的 WordPress slider url 问题