я наткнуться на этот код вокруг:Что делает переход CSS3?
-webkit-transition: all 0.1s ease-in;
-moz-webkit-transition: all 0.1s ease-in;
что же это сделать? может кто-то, пожалуйста, объясните дальше, я не понимаю образцы на w3schools и MDN. Я очень благодарен
переход описывает, как макет CSS будет «переход на другую раскладку», чтобы разбить его
первый элемент
-webkit-transition: all 0.1s ease-in;
все описывает, какие свойства CSS, чтобы применить эффект перехода
Свойство CSS свойства перехода используется для указания имен свойств CSS, к которым должен применяться эффект перехода.mdn transition property
0.1с описывает длительность
легкость в описывает тип перехода
так -webkit-transition: all 0.1s ease-in; это говорит для всех свойств CSS я хочу .01 второй переход время, использующее режим перехода в режим легкого перехода MDN
Спасибо, не получил его на первый взгляд –
@glendonphilippbaculio, часть которого была неясной (таким образом я могу сделать ответ лучше для всех остальных) – gh9
синтаксис на образцах, он был выполнен отдельно как {transition-property: width; продолжительность перехода: 2 с; Функция переключения времени: линейная; Задержка перехода: 1 с; } –
CSS3 Переходы в основном, когда элемент в DOM перемещается.
Например, он будет вращать прямоугольник div; он может увеличивать или растягивать элемент.
Насколько это точно? Что, если я изменю цвет фона? Тогда это не изменится, и это не имеет никакого отношения к DOM. – evolutionxbox
Изменение цвета не считается переходом. Например, просмотрите эту скрипку http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 и наведите курсор на красный квадрат, и он будет растягиваться. Это пример перехода. Надеюсь это поможет! – Catto
Этот пример переводит свойство ширины ... конечно, вы можете переходить к цветам. --- proof (http://leaverou.github.io/animatable/) – evolutionxbox
Это переводит все анимационные свойства с временным масштабом 0,1 с и кривой ослабления «простоты». Любые изменяемые анимационные свойства сделают это согласно этим правилам. – evolutionxbox
Проверьте эту ссылку: https://css-tricks.com/almanac/properties/t/transition/, а объяснение плюс живые примеры просты. – StaticBeagle