我想在同一个CSS文档中进行两次转换,但要使用不同的元素。我过去曾在一个项目上成功完成过此任务,但不记得我是如何解决此问题的。我知道悬停过渡之所以有效,是因为它是css文档中包含的最后一个过渡属性,但是我再次想不起如何使这两个过渡共存。
* {
box-sizing: content-box;
}
.age {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
input[type="image"] {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
outline: none;
}
@keyframes shadow-animation {
}
input [type="image"]:hover, :focus {
box-shadow: 0 0 5px rgba(0, 255, 0, 1);
}
.age__selection {
border: 1px transparent solid;
width: 200px;
height: 200px;
margin: 10px auto;
list-style: none;
overflow: hidden;
cursor: pointer;
}
.age__input{
height: 250px;
width: 250px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.age__selection:hover .age__input, .age__selection:focus .age__input {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.categories {
width: 42.5rem;
margin: 0 auto;
}
.title {
font-size: 30px;
font-weight: bold;
text-align: center;
font-family: arial, helvetica, sans-serif;
border: 1px solid lightgray;
padding: 12px;
margin: 0 auto;
width: 475px;
background-color: lightyellow;
}