问题遇到的现象和发生背景
CSS 中反方向时，如何设定动画开始的延时
问题相关代码，请勿粘贴截图
.from-info{
width: 174rpx;
height: 204rpx;
position: absolute;
/过渡效果/
transition: all 1s;
/不对向屏幕就隐藏/
backface-visibility: hidden;
animation-fll-mode:none;
}
.item-info .from-info:nth-of-type(1){
z-index: 1;
}
.item-info .from-info:nth-of-type(2){
transform: rotateY(180deg);
}
.from-flip1{
animation: symbolIcon1 2.5s ease-in-out 0s infinite alternate;
}
.from-flip2{
animation: symbolIcon2 2.5s ease-in-out 0s infinite alternate;
}
@keyframes symbolIcon1 {
100% {
transform: rotateY(-180deg);
}
}
@keyframes symbolIcon2 {
100% {
transform: rotateY(360deg);
}
}
运行结果及报错内容
我的解答思路和尝试过的方法
我尝试过从50%开始执行，但是反向是从100%开始的，如何解决反向翻转是延迟几秒
@keyframes symbolIcon1 {
50% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-180deg);
}
}
@keyframes symbolIcon2 {
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
我想要达到的结果
对两张图进行循环翻转展示，正向翻转3s后执行，执行完正向翻转之后在锅3s执行反向翻转，以此循环执行这个动效，请问如何解决
