关于transition和animation的执行过程的处理优先级的疑惑，求专业解答~
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
section{
width:600px;height:400px;margin:100px auto;
border:20px solid skyblue;border-radius:5px;
position:relative;
}
section:after{
display:block;content:"";clear:both;
}
input{
display:none;
}
label{
width:150px;height:30px;margin-top:350px;
float:left;
cursor:pointer;
font-style:oblique;font-size:24px;line-height:32px;text-align:center;
position:relative;
z-index:1000;
}
label:before{
width:34px;height:34px;
content:"";
position:absolute;left:50%;margin-left:-17px;
border-radius:50%;
box-shadow:0 0 0 4px rgba(255,255,255,.35);
}
label:not(:last-of-type):after{
width:2px;height:400px;
content:"";
position:absolute;left:148px;bottom:-19px;
background:linear-gradient(180deg,transparent,rgba(255,255,255,.5));
}
.picbox{
width:100%;height:100%;
position:absolute;top:0;left:0;
overflow:hidden;
}
.picbox div{
width:150px;height:100%;
float:left;
position:relative;
overflow:hidden;
}
/*---------------------重点分割线---------------------*/
.picbox>div:nth-child(1)>span {background-position:0 0;}
.picbox>div:nth-child(2)>span {background-position:-150px 0;}
.picbox>div:nth-child(3)>span {background-position:-300px 0;}
.picbox>div:nth-child(4)>span {background-position:-450px 0;}
.picbox>div>span:nth-child(1) {background-image:url("images/1.jpg");}
.picbox>div>span:nth-child(2) {background-image:url("images/2.jpg");}
.picbox>div>span:nth-child(3) {background-image:url("images/3.jpg");}
.picbox>div>span:nth-child(4) {background-image:url("images/4.jpg");}
/*过渡效果在这段代码*/
.picbox span{
width:100%;height:100%;
position:absolute;top:0;left:0;
transform:translate(-150px,0);
transition:transform 500ms ease-in-out;
}
input:nth-of-type(1):checked~.picbox>div>span:nth-child(1),
input:nth-of-type(2):checked~.picbox>div>span:nth-child(2),
input:nth-of-type(3):checked~.picbox>div>span:nth-child(3),
input:nth-of-type(4):checked~.picbox>div>span:nth-child(4){
z-index:10; transform:translate(0,0); animation:none;
}
/*右出动画效果*/
input:checked~.picbox>div>span:nth-child(1),input:checked~.picbox>div>span:nth-child(2),
input:checked~.picbox>div>span:nth-child(3),input:checked~.picbox>div>span:nth-child(4){
animation:slideOut 500ms ease-in-out;
}
@keyframes slideOut{
0%{transform:translate(0,0);}
100%{transform:translate(150px,0);}
}
</style>
</head>
<body>
<section>
<input type="radio" name="pic" id="radio1" checked>
<label for="radio1">1</label>
<input type="radio" name="pic" id="radio2">
<label for="radio2">2</label>
<input type="radio" name="pic" id="radio3">
<label for="radio3">3</label>
<input type="radio" name="pic" id="radio4">
<label for="radio4">4</label>
<div class="picbox">
<div>
<span></span><span></span><span></span><span></span>
</div><div>
<span></span><span></span><span></span><span></span>
</div><div>
<span></span><span></span><span></span><span></span>
</div><div>
<span></span><span></span><span></span><span></span>
</div>
</div>
</section>
</body>
</html>
以上是完整代码，以下有几点疑惑：
1. 当把input:nth-of-type(1~4):checked~.picbox>div>span:nth-child(1~4)里面的animation:none;都去掉时，transition过渡和animation动画会产生冲突，结果是只执行transition而不执行animation，是不是可以说明：当控制同一个元素的同一个属性时，transition的执行权重比animation的高？
2. 如果把最下面的animation动画效果代码去掉，会发现当前选中的图片从左向右移进来，与此同时上一个选中的图片从右到左返回去，这是一个完整transition过渡过程（来回往返，默认状态-->指定状态-->默认状态），这个没有什么问题。
而加入animation动画效果代码之后，animation控制的是上一个选中的图片的状态，这和transition过渡的返回过程不就产生冲突了吗，也就是上一个选定的图片本该是被transition控制向左移出，但实际却被animation控制了向右移出。同一个元素的同一个属性控制，在这时候是animation发挥了作用，这和上面第一条的“transition的执行权重比animation的高”有点矛盾，请问这是为什么？
正在回答 回答被采纳积分+1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div {
width: 200px;
height: 300px;
background-color: red;
animation: mymove 5s infinite;
transition: transform 4s ease-in-out;
}
div:hover{ transform:translate(400px,400px);}
@keyframes mymove {
from {
transform:translate(0,0);
}
to {
transform:translate(100px,100px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>重新修改测试了，不管如何替换位置，都是执行animation~
你也可以看下我写的demo。我觉得animation和tranisition是不同的效果，针对情况去使用，没有权重这一说。
我觉得不冲突把，你的代码太多了，好复杂，我写了一个demo，你看下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div {
width: 200px;
height: 300px;
background-color: red;
position:relative;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
transition: width 4s;
}
div:hover {
width: 400px;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
@-webkit-keyframes mymove
{
from {
left: 200px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>transition和animation不冲突啊~可以同时执行，如果你要给一个元素同时添加transition和animation，且都是一个动画，这种情况发生的几率太小了吧
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星