code looks like this.
because there is a need for animation, the same action needs to be done twice, but the second one will be delayed for 1s to execute
PC , that is, two actions will be executed
, but when it comes to ios , it will be found that the animation only executes the second one, and the first one is not executed (that is, the animation is only delayed by 1s and is completed at a speed of .6s.
unless you write two animations separately, and then the values that change between each other cannot be the same.
that is, test_2 animation is like this. At 100%, it was originally rotate (- 180deg), but changed to rotate (- 180.1deg)
has anyone ever encountered this problem?
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="user-scalable=no,width=device-width,minimal-ui, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<title></title>
<style>
.test{
width: 100px;
height: 100px;
background: -sharpfd6e3b;
-webkit-animation: test_1 .6s ease-in-out 1 forwards ,
test_1 .6s 1s ease-in-out 1 forwards;
}
@-webkit-keyframes test_1
{
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-180deg);
}
}
@-webkit-keyframes test_2
{
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-180.1deg);
}
}
</style>
</head>
<body>
<div id="mainWrap" class="active">
<div class="test"></div>
</div>
</body>
</html>