html keyframes无效,@ -webkit-keyframes动画为什么不起作用？

我的问题是@ -webkit-keyframes动画不起作用，我没有看到任何线索......所有其他部分工作良好，包括背景颜色和字体颜色转换。这里是HTML和CSS：@ -webkit-keyframes动画为什么不起作用？

test

About
Skills
Works
Contact

CSS：

#nav{

list-style:none;

margin:40px auto;

padding:0;

width: 820px;

}

#nav li{

width: 200px;

height: 300px;

overflow: hidden;

position: relative;

float: left;

background: #00D8CC;

-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

margin-right: 2px;

-webkit-transition: all 300ms linear;

}

#nav li:last-child {

margin-right: 0px;

}

#nav li a{

display:block;

text-align: center;

position: relative;

height: 100%;

color: #333;

}

.content {

position: absolute;

left: 0px;

width: 100%;

height: 50%;

top: 50%;

}

.span {

font-size: 30px;

opacity: 0.8;

text-align: center;

line-height: 40px;

-webkit-transition: all 300ms linear;

}

#nav li:hover {

background-color: #00AAAA;

}

#nav li:hover .span{

color: green;

-webkit-animation: move 300ms ease;

}

@-webkit-keyframes move {

from {

-webkit-transform: translateX(-100%) rotate(-90deg);

}

to {

-webkit-transform: translateX(0%) rotate(0deg);

}

谢谢。

您确定'.span'是一个css类，而不是一个元素('span')吗？ –

你使用什么浏览器？ webkit关键字只支持webkit引擎，即Safari和Chrome(最为突出的)。 FireFox改为使用@ -moz-keyframes和Opera @ -o-keyframes。 –

是的，我将span标签命名为class =“span”，所以我认为无论是“span”还是“.span”都没关系。我正在使用Chrome。 –

html keyframes无效,@ -webkit-keyframes动画为什么不起作用？相关推荐

html keyframes无效,关于@keyframes定义动画的问题_html/css_WEB-ITnose
我想让一个长方形先转30度,再向右走200px距离,然后再转330度,最后走回原位.(代码不考虑兼容性) 运行的时候不是按我想的步骤来的,而是:转30度和向右走同时进行,转330度和往回走同时进行.请 ...
html keyframes无效,CSS Module解决全局或本地使用@keyframes无效问题
最近使用CSSModule开发react项目,遇到一个问题,使用@keyframes无效,问题如下 /** less + css module **/ :global { .effect-bottom ...
keyframes介绍与调用动画方法
keyframes介绍 @keyframes changecolor{0%{background: red;}50%{background: red;}100%{background: green;} ...
css3 slide动画,css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work)
css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work) 飞机动画块(他从一边到另一边飞行 - 永远). 可以使用jquery折 ...
计算机内页动画的作用是什么,滑环工作原理动画示意图有什么作用？
滑环工作原理动画示意图有什么作用? 发布日期:2019-01-16 滑环在电机上面所起到的作用还是非常大的,如果在购买滑环时所购买到的质量不好使用性不高,都会影响到最终的定机使用性.当然在购买了之后也 ...
html keyframes无效,CSS3 中的@keyframes介绍
语法 @keyframes animationname {keyframes-selector {css-styles;}} animationname 必需.定义动画的名称. keyframes-s ...
html keyframes无效,sass中@keyframes后变量无效的问题
定义动画用@keyframes,为了保证兼容性,通常在sass中会写成javascript @mixin keyframes($a) { @-webkit-keyframes $a { @conten ...
css3 keyframes zoom,CSS3 @keyframes 规则 | w3cschool菜鸟教程
CSS3 @keyframes 规则实例使一个div元素逐渐移动200像素: @keyframes mymove { from {top:0px;} to {top:200px;} } @-web ...
css如何重置触发动画,如何通过JavaScript重新触发WebKit CSS动画？
我在CSS3转换测试github页面上根据源代码和示例找到了答案. 基本上,CSS动画具有一个animationEnd在动画完成时触发的事件. 对于Webkit浏览器,此事件称为" webk ...
IOS解决闪屏无效LuanchImage启动动画设置加载广告闪屏图
IOS闪屏动画LuanchImage设置无效设置Launch Image无效其它方法转载请标明出处: https://dujinyang.blog.csdn.net/article/detail ...

html keyframes无效,@ -webkit-keyframes动画为什么不起作用？

html keyframes无效,@ -webkit-keyframes动画为什么不起作用？相关推荐

最新文章

热门文章