0
Я попытался сравнить код с несколькими источниками, включая учебник, который я выполнил, чтобы сделать это, а мои переходы не работают, это просто переход от начального состояния без анимации. Спасибо заранее.CSS3 Переход с изменяющейся легкостью Не работает
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="no">no</div>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
<div id="four">four</div>
<div id="five">five</div>
<div id="minustwo">minustwo</div>
</body>
CSS:
div {
width: 300px;
margin: 5px 0;
padding: 5px;
color: white;
background-color: #ED8029;
text-align: left;
border-radius: 5px;
}
div:hover {
width: 700px;
}
div.no {
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear 2s;
}
div.one {
-webkit-transition: 3s linear 1s;
-moz-transition: 3s linear 1s;
-o-transition: 3s linear 1s;
-ms-transition: 3s linear 1s;
transition: 3s linear 1s;
}
div.two {
-webkit-transition: 3s linear 2s;
-moz-transition: 3s linear 2s;
-o-transition: 3s linear 2s;
-ms-transition: 3s linear 2s;
transition: 3s linear 2s;
}
div.three {
-webkit-transition: 3s linear 3s;
-moz-transition: 3s linear 3s;
-o-transition: 3s linear 3s;
-ms-transition: 3s linear 3s;
transition: 3s linear 3s;
}
div.four {
-webkit-transition: 3s linear 4s;
-moz-transition: 3s linear 4s;
-o-transition: 3s linear 4s;
-ms-transition: 3s linear 4s;
transition: 3s linear 4s;
}
div.five {
-webkit-transition: 3s linear 5s;
-moz-transition: 3s linear 5s;
-o-transition: 3s linear 5s;
-ms-transition: 3s linear 5s;
transition: 3s linear 5s;
}
div.minustwo {
-webkit-transition: 3s linear -2s;
-moz-transition: 3s linear -2s;
-o-transition: 3s linear -2s;
-ms-transition: 3s linear -2s;
transition: 3s linear -2s;
}
Хорошо, я получаю сейчас, в этом случае вы использовали 'all', чтобы сказать, что все свойства. Вы можете изменить это на 'width', чтобы просто означать переход по ширине. +1 – Ozzy
Да, вы можете указать каждое свойство по отдельности или использовать все. Использование всех сокращает его, но может иметь непреднамеренные последствия, поэтому лучше всего указывать их. Я использовал все, чтобы держать его коротким. –
Вот что я думал, поэтому я указал ширину перехода, и я все еще не получаю переход, просто переход из состояния в другое. Знаете ли вы, есть ли что-то, что могло бы блокировать его, хотя примеры, на которые я смотрю, как и выше, от W3, очень просто? –