为何id为hello的p元素无法触发CSS动画？求解决方法

你的动画没生效有两个核心问题：

1. 选择器不匹配 #

CSS里你用的是类选择器 .hello，但HTML里的p元素用的是id属性 id="hello"，两者不对应。把CSS里的类选择器改成id选择器#hello就能匹配上目标元素。

2. CSS文件名拼写错误 #

HTML里引入的CSS文件是sttyle.css（多了一个t），如果你的实际CSS文件名是style.css（正常拼写），这个错误会导致样式根本加载不进来，自然动画没效果。

修正后的CSS代码 #

body{    
    background: linear-gradient(35deg,skyblue,limegreen);    
    background-repeat: no-repeat;    
    background-attachment:fixed;
}
@keyframes slideup {    
    from{        
        transform: translateX(1000px);    
    }    
    to{        
        transform: translateX(0px);    
    } 
} 
#hello{    /* 改为id选择器 */
    animation-name: slideup;    
    animation-duration: 1s;    
    animation-delay: 1s;
}

修正后的HTML代码（文件名正确的情况） #

<!DOCTYPE Html>    
<html>        
    <head>            
        <title> Title</title>            
        <link rel="stylesheet" href="style.css"> <!-- 修正文件名拼写 -->                
    </head>        
    <body>            
        <h1 id="heading1">Web heading</h1>            
        <p id="hello">hello</p>        
    </body>    
</html>

内容的提问来源于stack exchange，提问作者Devraaj Banerjee