常用浏览器Edge运行html5的CSS动画问题记录:错误注释代码符号导致css动画部分效果失效

上河雨滴

已于 2024-03-06 10:39:11 修改

阅读量221

点赞数

文章标签： css html5 前端

于 2023-06-06 19:16:30 首次发布

本文链接：https://blog.csdn.net/qq_54039576/article/details/131074107

版权

省流:

在普通的CSS中，应该使用/* */来注释代码。不过，如果你确实在一个可以处理SCSS的环境中，那么这个使用了//来注释掉一行代码，(这是Sass/SCSS的注释语法。)就是正确的。

css问题代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the
			hookah out of its mouth, and addressed her in a languid, sleepy voice.</p>

	</body>
	<style type="text/css">
		p {
			animation-duration: 8s;
			animation-name: slidein;
			animation-iteration-count: infinite;  	//重复动画
			animation-direction: alternate;  		//来回运动
		}

		@keyframes slidein {
			from {
				margin-left: 100%;
				width: 300%;
			}

			75% {
				font-size: 300%;
				margin-left: 25%;
				width: 150%;
			}

			to {
				margin-left: 0%;
				width: 100%;
			}
		}


	</style>
</html>

演示效果: 发现代码的来回运动效果并没有生效

百度显示查询了解edge到,是支持CSS animation-direction 属性, 不用添加前缀

经检查发现是css代码注释的位置导致部分代码没有生效

删除注释代码 " //重复动画 " , 返回发现来回运动效果生效,

小结: 看来我得改变css代码注释习惯了,可能是css代码被压缩去掉空格换行导致css代码问题

这样css注释暂不影响css代码效果,

或者不用双斜杠注释//

2024/3/6 更新个人注释理解

注释问题：使用了//来注释掉一行代码，这是Sass/SCSS的注释语法。在普通的CSS中，应该使用/* */来注释代码。不过，如果你确实在一个可以处理SCSS的环境中，那么这个注释方式就是正确的。
资料来源:文心一言

上河雨滴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
常用浏览器Edge运行html5的CSS动画问题记录:错误注释代码符号导致css动画部分效果失效

百度显示查询了解edge到,是支持CSS animation-direction 属性, 不用添加前缀。小结: 看来我得改变css代码注释习惯了,可能是css代码被压缩去掉空格换行导致css代码问题。删除注释代码 " //重复动画 " , 返回发现来回运动效果生效,经检查发现是css代码注释的位置导致部分代码没有生效。演示效果: 发现代码的来回运动效果并没有生效。这样css注释暂不影响css代码效果,或者不用双斜杠注释//
复制链接

扫一扫