CSS анимация не работает
Я сделал 2 анимации, первая работает нормально, а вторая — нет. Хотя оба они почти идентичны, это просто не сработает. Буду признателен за любую помощь!
#menuAnim1 < height: 8px; background: black; position: relative; top: 50px; animation: widthStretch 4s ease-out; animation-fill-mode: forwards; >#menuAnim2 < width: 8px; background: black; position: relative; left: 50px; animation: heightStretch 4s ease-out; animation-fill-mode: forwards; >@keyframes widthStretch < from < width: 0; >to < width: 100%; >> @keyframes heightStretch < from < height: 0; >to < height: 100%; >>Теперь вы могли видеть, что я имею в виду. Второй должен увеличивать в нем высоту, а затем пересекать первый, но это не так.
Я советую взглянуть на мой ответ, если вы хотите понять свою проблему, так как я совсем не согласен с принятым ответом 🙂
и если у вас есть какие-то сомнения, не принимайте ответ, пока не получите более подробную информацию . цель состоит не в том, чтобы принять рабочий ответ без объяснения причин, а в том, чтобы принять ответ, предоставляющий необходимую информацию, чтобы вы могли понять, почему . stackoverflow.com/ а / 48496776/8620333
3 ответа
Я совсем не согласен с принятым ответом, поскольку он не дает реальной причины того, почему анимация не работает.
Оба ваших элемента используют процентные значения для высоты/ширины в своей анимации, и эти значения будут рассчитываться относительно их контейнера (содержащего блок), который является телом.
По умолчанию тело является элементом уровня блока, и его ширина не будет зависеть от его содержимого, поэтому процентная ширина на анимированных элементах div будет работать нормально, НО, поскольку высота тела зависит от его содержимого (что относится ко всем элементам) Высота в процентах на анимированном элементе div не будет работать и не будет работать auto .
Вы должны явно указать высоту тела, чтобы анимация работала. Вы можете попробовать фиксированную высоту, и ваш элемент будет расти от 0 до этой высоты.
body < height:100px; >#menuAnim1 < height: 8px; background: black; position: relative; top: 50px; animation: widthStretch 4s ease-out; animation-fill-mode: forwards; >#menuAnim2 < width: 8px; background: black; position: relative; left: 50px; animation: heightStretch 4s ease-out; animation-fill-mode: forwards; >@keyframes widthStretch < from < width: 0; >to < width: 100%; >> @keyframes heightStretch < from < height: 0; >to < height: 100%; >>Вы также можете указать height:100% для тела, НО это также не будет работать, потому что та же логика будет применяться к телу и содержащему его блоку ( html ), для которого не указана высота, поэтому вам также нужно добавить height:100% к html , Последний будет работать, потому что содержащий блок html является областью просмотра, где размерность (высота/ширина) известна и не зависит от содержимого.
body,html < height:100%; >#menuAnim1 < height: 8px; background: black; position: relative; top: 50px; animation: widthStretch 4s ease-out; animation-fill-mode: forwards; >#menuAnim2 < width: 8px; background: black; position: relative; left: 50px; animation: heightStretch 4s ease-out; animation-fill-mode: forwards; >@keyframes widthStretch < from < width: 0; >to < width: 100%; >> @keyframes heightStretch < from < height: 0; >to < height: 100%; >>Почему используется позиция: абсолютные работы?
Поскольку добавление position:absolute сделает элемент позиционированным относительно первого нестатического родительского элемента, и поскольку родительский элемент не размещен, он будет позиционирован относительно области просмотра, а высота percetange ведет себя по-разному с помощью positon:absolute
Определяет процентную высоту. Процент рассчитывается относительно высоты сгенерированного блока, содержащего блок. Если высота содержащего блока не указана явно (т.е. Зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как ‘auto’
Это логично, поскольку элемент position:absolute не будет влиять на высоту содержащего его блока, поскольку он удален из потока.
Теперь область просмотра имеет высоту и ширину, которые являются просто высотой/шириной вашего браузера, поэтому height:100% будет всей высотой экрана.
#menuAnim1 < height: 8px; background: black; position: relative; top: 50px; animation: widthStretch 4s ease-out; animation-fill-mode: forwards; >#menuAnim2 < width: 8px; background: black; position: absolute; left: 50px; animation: heightStretch 4s ease-out; animation-fill-mode: forwards; >@keyframes widthStretch < from < width: 0; >to < width: 100%; >> @keyframes heightStretch < from < height: 0; >to < height: 100%; >>Постарайтесь сделать свое position:relative тела position:relative . Теперь ваш элемент будет позиционироваться относительно тела, и вы увидите, что анимация также будет работать, но со странным переосмыслением.
Как я уже говорил до height:100% относится к содержащему блоку, и в этом случае его body а высота body заполнена другим элементом, и это ровно 8 пикселей.
body < position:relative; >#menuAnim1 < height: 8px; background: black; position: relative; top: 50px; animation: widthStretch 4s ease-out; animation-fill-mode: forwards; >#menuAnim2 < width: 8px; background: black; position: absolute; left: 50px; animation: heightStretch 4s ease-out; animation-fill-mode: forwards; >@keyframes widthStretch < from < width: 0; >to < width: 100%; >> @keyframes heightStretch < from < height: 0; >to < height: 100%; >>[Решено] Почему не работает анимация keyframes?
В найденном примере вроде всё так же. Но при этом — работает:
Изменено 19 апреля 2019 пользователем d0ublezer0
Ссылка на комментарий
Поделиться на других сайтах
0 ответов на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Всем привет! Пытаюсь сделать анимацию так, чтобы второй блок появлялся только после того, как первый полностью уйдёт влево. Ну просто никак, пыталась нагуглить, но получается только одновременное движение двух блоков. Может, кто-то опытный хотя бы намекнёт, что не так в моём коде?
https://codepen.io/20ZeteM02/pen/WNwwEEp
Всем привет! Столкнулся со следующей проблемой:
Верстаю макет на Bootstrap и столкнулся с тем, что не получается нормально отпозиционировать элементы, имеющие, во-первых, свойство
transform: rotate(-90deg); во-вторых, абсолютное позиционирование для того, чтобы прилепить их к правому краю экрана.
Итак, вот исходный код файлов:
LuckyFox
Travel
А вот здесь style.css:
.turism_main < background: gray; background-size: cover; height: 100vh; width: 100vw; color: #fff; position: relative; >.company-name < font-size: 2em !important; letter-spacing: 2px; opacity: .7; position: absolute; right: 45%; left: 45%; text-align: center !important; display: block; line-height: 1; margin-top: 15px; width: 200px; >.aside_main < text-align: right; padding: 0; >.aside-content < z-index: 999; position: absolute; right: -195px; top: 400px; transform: rotate(-90deg); font-size: .8em; background: black; >.aside-content div, .aside-content a < display: inline-block; color: white; >.aside-content i < padding-right: 10px; color: #e9ba02; font-weight: bold; >.aside-contact, .aside-mail < padding: 5px 10px 5px 10px; border: 1px solid white; margin-right: 20px; >.aside-calendar, .aside-lang < margin-left: 20px; >Не спрашивайте меня, почему я сделал кривую строку .row и засунул в нее эту ссылку справа. Изначально можно было сделать ее position: absolute, я так и сделал, но потом стал мучаться с сабжем и переделал, в надежде, что поможет.
Если вам потребуется вообще переделать напрочь весь .aside-*, то пожалуйста, лишь бы было понятно, почему вы это делаете. Потому что мне нужно понять.
И еще есть один вопрос:
Почему, когда я вписываю что-то в .aside-content , то он начинает ехать влево? Ведь у него не увеличивается ни длина, ни ширина. А если я увеличиваю width, например, то он тоже уезжает далеко.
Еще раз повторю задачу:
Нужно сделать так, чтобы весь блок .aside-content был прилеплен к правому краю и каким-то образом был адаптирован, если я уменьшаю экран по вертикали. В данный момент этот блок просто под .container-fluid .
Как быть?
Сначала решил не прикреплять картинку, потом, все же, решил. Чтобы было нагляднее.
Как сделать анимацию цикличной?
Есть блок, который маячит, привлекает, но делает он это всего 1 раз.
Как и можно ли с помощью всего лишь css придать ему цикличность с заданными пробелами (остановками).
Привет. У меня возникла проблема:
Есть такой пентагон, который при клике на пункт меню поворачивается в его сторону https://yadi.sk/i/Xv1jCEZkghMH6
проблема в том, что пентагон должен крутиться по короткому пути к активному пункту.
Ребят помогите разобраться почему не работает свойство rotate и как сделать что бы по клику на .list:after список выпадал?
Заранее спасибо огромное
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
или если подсветка ячеек не обязательна, то можно так
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
Правило @keyframes: некоторые варианты не работают в IE и Firefox
Здравствуйте, уважаемые!
Прошу помощи в следующей проблеме:
делаю анимацию через правило @keyframes, в анимации задействованы несколько свойств, всё прекрасно работало во всех основных браузерах, причем без префиксов, пока не попробовал задать таким же образом смену фоновой картинки. В Хроме это работает тоже, а вот в IE и Firefox — ни в какую! Пробовал и с префиксами и без — не работает. при этом остальные свойства анимируются нормально.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
style type="text/css"> @keyframes col_1 < 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% > @keyframes spin1 < 0% 100% > #to div < position: absolute; top: 150px; animation-name: col_1, spin1; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-in; >.toflake.f1 < background-image:url('a_1.jpg'); width: 350px; height: 350px; left: 38%; animation-duration: 12s; >/style> div id="to" class="to"> div class="toflake f1">/div> /div>
Не работают некоторые кнопки и не заполняются некоторые поля во всех браузерах
Добрый день! Не работают некоторые кнопки и не заполняются некоторые поля во всех браузерах.
Неправильно отображаются некоторые страницы в firefox
Версия 50.0, но то же самое было и на предыдущей, которую я снёс и установил новую в процессе.
В слове угаданы некоторые буквы, надо рассмотреть все возможные варианты.
Помогите пожалуйста решить задачу в borland c++ В слове угаданы некоторые буквы, надо.
Не работают некоторые IF
Здравствуйте. Есть участок кода: if checkbox2.Checked=true and checkbox3.Checked=false and.
Сообщение от bogdant 
А Вы читали?
Я прочитал.
Только не про background-image, а про background, и даже перешел по ссылочке и освежил в памяти, какие свойства там могут быть:
body { background: #00ff00 url("smiley.gif") no-repeat fixed center; }
Вот изменение свойства url(«smiley.gif») меня и итересует. Кроме того, Вы очевидно не обратили внимания, но я в вопросе написал, что данная конструкция работает. Перечисляю браузеры, в которых работает точно: Хром, Яндекс браузер, Опера, Сафари. Не работает в ФФ и ИЕ.
Сообщение было отмечено mrtoxas как решение
Решение
Сообщение от bogdant
Только не про background-image, а про background, и даже перешел по ссылочке и освежил в памяти, какие свойства там могут быть:
Вы упорно не понимаете разницы между мягким и теплым. background — это сборное свойство, и если вы укажите в анимации 10%
Свойство font. например, тоже обозначено как animatable, но font-family не анимируется, а font-size — анимируется.
А по поводу
Сообщение от bogdant
Если вы не знаете, что браузеры на платформе webkit могут вести себя не так как браузеры на платформе, например, gecko, то тогда я ретируюсь, мне нечего вам сказать
Поскольку Вы упорно не понимаете разницы между написанным кем-то и когда-то справочником, к тому же содержащим взаимоисключающие данные и, к тому же, с вероятностью 100% устаревшие (я проверил: свойство @keyframes должно работать во всех браузерах кроме оперы мини безо всяких префиксах, вопреки этому справочнику, можете посмотреть сами, я не вру http://caniuse.com/#search=keyframes), и ответом опытного специалиста, за которым, собственно, люди и приходят на форум. Ваша ретирада вполне оправдана.
О том, что браузеры на разных платформах могут вести себя по-разному я в курсе, но доверять справочнику (так же как, впрочем, и человеку), утверждающему, что интересующее меня свойство не анимируется ни в каких браузерах, когда я своими глазами вижу, что, по крайней мере webkit браузеры его поддерживают. было бы по меньшей мере странно
Сообщение от bogdant
Вы упорно не понимаете разницы между написанным кем-то и когда-то справочником, к тому же содержащим взаимоисключающие данные и, к тому же, с вероятностью 100% устаревшие
Сообщение от bogdant
Сообщение от bogdant
покажите вашему «опытному» специалисту эту ссылку.
http://www.w3.org/TR/css3-back. ound-image
Или сайт консорциума тоже не авторитетный источник?
Послушайте! Ну Вы же уже ретировались! Дайте другим шанс, может кто знает, как решить эту проблему. Я, в принципе уже сообразил, как можно сделать (через background-position), но хотелось бы еще вариантов.
Сообщение от Shakalaka
покажите вашему «опытному» специалисту эту ссылку.
http://www.w3.org/TR/css3-back. ound-image
Или сайт консорциума тоже не авторитетный источник?
Сайт консорциума не следит за шалостями разработчиков. Вон на вэбкитовских то работает, причем без префикса, может и на остальных что-то можно придумать. А мой «опытный» специалист пока не ответил, некому показывать, как не грустно.