CSS动画延迟未触发
只是想知道为什么这个简单的动画延迟看起来不起作用。我只想在元素淡入之前延迟7秒。非常简单，我肯定，但我已经看了很久了 .box1{ 宽度：100px； 保证金：0自动； 位置：相对位置； 边框：1px纯蓝色； } .box2{ 背景：红色； 颜色：黑色； 文本对齐：居中； 动画延迟：7秒； -webkit动画延迟：7秒； 动画：fadein 2s线性； -webkit动画：fadein2s线性； } @关键帧淡入淡出{ 从{ 不透明度：0； } 到{ 不透明度：1； } } @-webkit关键帧fadein{ 从{ 不透明度：0； } 到{ 不透明度：1； } } 一些文本CSS动画延迟未触发,css,animation,css-animations,Css,Animation,Css Animations,只是想知道为什么这个简单的动画延迟看起来不起作用。我只想在元素淡入之前延迟7秒。非常简单，我肯定，但我已经看了很久了 .box1{ 宽度：100px； 保证金：0自动； 位置：相对位置； 边框：1px纯蓝色； } .box2{ 背景：红色； 颜色：黑色； 文本对齐：居中； 动画延迟：7秒； -webkit动画延迟：7秒； 动画：fadein 2s线性； -webkit动画：fadein2s线性； } @关键帧淡入淡出{ 从{ 不透明度：0； } 到{ 不透明度：1； } } @-webkit关
将动画延迟放在动画之后，因为延迟需要按顺序附加到动画。顺序很重要： .box1{ 宽度：100px； 保证金：0自动； 位置：相对位置； 边框：1px纯蓝色； } .box2{ 背景：红色； 颜色：黑色； 文本对齐：居中； -webkit动画：fadein2s线性； 动画：fadein 2s线性； -webkit动画延迟：7秒； 动画延迟：7秒； } @关键帧淡入淡出{ 从{ 不透明度：0； } 到{ 不透明度：1； } } @-webkit关键帧fadein{ 从{ 不透明度：0； } 到{ 不透明度：1； } } 一些文本
将动画延迟放在动画之后，因为延迟需要按顺序附加到动画。顺序很重要： .box1{ 宽度：100px； 保证金：0自动； 位置：相对位置； 边框：1px纯蓝色； } .box2{ 背景：红色； 颜色：黑色； 文本对齐：居中； -webkit动画：fadein2s线性； 动画：fadein 2s线性； -webkit动画延迟：7秒； 动画延迟：7秒； } @关键帧淡入淡出{ 从{ 不透明度：0； } 到{ 不透明度：1； } } @-webkit关键帧fadein{ 从{ 不透明度：0； } 到{ 不透明度：1； } } 一些文本 尝试使用长格式动画属性： 动画延迟 动画名称 动画持续时间 动画计时功能 .box1{ 宽度：100px； 保证金：0自动； 位置：相对位置； 边框：1px纯蓝色； } .box2{ 背景：红色； 颜色：黑色； 文本对齐：居中； 不透明度：0； -webkit动画延迟：7秒； -webkit动画名称：fadein； -webkit动画持续时间：2秒； -webkit动画计时功能：线性； 动画延迟：7秒； 动画名称：fadein； 动画持续时间：2秒； 动画计时功能：线性； } @-webkit关键帧fadein{ 从{ 不透明度：0； } 到{ 不透明度：1； } } @关键帧淡入淡出{ 从{ 不透明度：0； } 到{ 不透明度：1； } } 一些文本 尝试使用长格式动画属性： 动画延迟 动画名称 动画持续时间 动画计时功能 .box1{ 宽度：100px； 保证金：0自动； 位置：相对位置； 边框：1px纯蓝色； } .box2{ 背景：红色； 颜色：黑色； 文本对齐：居中； 不透明度：0； -webkit动画延迟：7秒； -webkit动画名称：fadein； -webkit动画持续时间：2秒； -webkit动画计时功能：线性； 动画延迟：7秒； 动画名称：fadein； 动画持续时间：2秒； 动画计时功能：线性； } @-webkit关键帧fadein{ 从{ 不透明度：0； } 到{ 不透明度：1； } } @关键帧淡入淡出{ 从{ 不透明度：0； } 到{ 不透明度：1； } } 一些文本
下面的代码有效。我将长方体的初始不透明度设置为0，使其在动画中淡入淡出。只有在动画本身之后声明动画延迟属性时，动画延迟属性才有效。我还添加了动画填充模式：向前；使长方体在动画后保持显示 .box1{ 宽度：100px； 保证金：0自动； 位置：相对位置； 边框：1px纯蓝色； } .box2{ 背景：红色； 颜色：黑色； 文本对齐：居中； 动画：fadein 2s线性； -webkit动画：fadein2s线性； 动画延迟：7秒； -webkit动画延迟：7秒； 动画填充模式：正向； -webkit动画填充模式：正向； 不透明度：0； } @关键帧淡入淡出{ 从{ 不透明度：0； } 到{ 不透明度：1； } } @-webkit关键帧fadein{ 从{ 不透明度：0； } 到{ 不透明度：1； } } 一些文本
下面的代码有效。我将长方体的初始不透明度设置为0，使其在动画中淡入淡出。只有在动画本身之后声明动画延迟属性时，动画延迟属性才有效。我还添加了动画填充模式：向前；使长方体在动画后保持显示 .box1{ 宽度：100px； 保证金：0自动； 位置：相对位置； 边框：1px纯蓝色； } .box2{ 背景：红色； 颜色：黑色； 文本对齐：居中； 动画：fadein 2s线性； -webkit动画：fadein2s线性； 动画延迟：7秒； -webkit动画延迟：7秒； 动画填充模式：正向； -webkit动画填充模式：正向； 不透明度：0； } @钥匙 拉梅斯法代因{ 从{ 不透明度：0； } 到{ 不透明度：1； } } @-webkit关键帧fadein{ 从{ 不透明度：0； } 到{ 不透明度：1； } } 一些文本
非常感谢这位朋友非常感谢这位朋友非常感谢