带有关键帧和悬停的CSS动画

我正在制作我的第一个网站，却被卡住了。在页面加载时，我有动画（元素向下放置），但我也有：悬停比例。所以动画现在可以工作了，但当我悬停时，它不会放大。我要寻找的结果是页面上的加载元素下降，然后当你们悬停在它们上面时，它们会放大

顶部收割台h1{
文本转换：大写；
颜色：白色；
字号：700；
文本阴影：10px 15px 10px rgba（0,0,0,0.6）；
过渡：变换，缩放2秒；
转换：translateY（-80px）；
动画：进来2秒；
动画填充模式：正向；
}
顶部收割台h1：悬停{
转换：标度（1.05）；
}
@关键帧进入{
到{transform:translateY（0）；}
}

李设计
伊格纳斯·莱文斯卡斯





欢迎

您将规则放在了错误的类中

我将它们重新排列如下：

top-header h1 {
    text-transform: capitalize;
    color:white;
    font-weight: 700;
    text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
    animation: come-in 2s;
}

top-header h1:hover {
    transform: scale(1.05);
    transition: scale 2s;
    animation-fill-mode: forwards;
}

@keyframes come-in {
    from {transform: translateY(-80px);}
    to {transform: translateY(0);}
}

---

元素中使用的任何属性：hover也应该存在于元素中，以便在悬停时可以更改该属性

这是你最后的工作CSS

top-header h1 {
    text-transform: capitalize;
    color:white;
    font-weight: 700;
    text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
    animation: come-in 2s;
}

top-header h1:hover {
    transform: scale(2);
    transform-origin: top left;
}

@keyframes come-in {
  from { transform: translateY(-80px) scale(1);}
    to {transform: translateY(0) scale(1);}
}

以及codepen的工作示例

伊格纳斯·莱文斯卡斯





欢迎

write transform together@Timothyle Scale动画应在悬停后开始。奇怪的是，我认为动画属性不能一起工作。如果删除动画，则可以进行缩放过渡。问题是如何同时在同一属性上使用动画和变换time@AMH是的，这是真正的问题。似乎把过渡和动画放在同一个属性上会引起冲突。太棒了！多谢各位@AMH你可以添加动画以及悬停风格我添加了过渡到顶部标题h1，工作完美

top-header h1 {
    animation-fill-mode: forwards;<---------------Remove
    transform: translateY(-80px);<---------------Remove
    //more code
}

@keyframes come-in {
   from { transform: translateY(-80px);} <------------Added
   to {transform: translateY(0);}
}