CSS-анимация для расширения div от центра наружу
Я пытаюсь сделать так, чтобы следующее расширялось наружу от центра (почти как открывающиеся шторы).
Это должно выглядеть примерно так, но вместо - это пустое место.
-------------------t-----------sti---------estin-------Testing---
.animation{
width: 100%;
text-align: center;
font-size: 50px;
padding: 25px;
background: black;
color: white;
}<div class = "animation">
Testing
</div>Также хотелось бы, чтобы это было возможно без использования JavaScript.
Ответы 3
Используйте clip-path и CSS-анимации.
Примечание: в Safari и других браузерах необходим префикс -webkit.
Первый ключевой кадр имеет 4 точки в центре оси X, но в их последнем (максимальном) месте на оси Y. Это позволяет нам анимировать только ось X.
Второй ключевой кадр перемещает 4 точки наружу в их максимальные положения по оси X, при этом часть Y остается неизменной.
Немного сбивает с толку, но см. Ниже:
.animation{
width: 100%;
text-align: center;
font-size: 50px;
padding: 25px;
background: black;
color: white;
animation: expand_center 5000ms;
animation-fill-mode: forwards;
}
@keyframes expand_center {
0% {
clip-path: polygon(50% 100%,50% 0,50% 0,50% 100%);
-webkit-clip-path: polygon(50% 100%,50% 0,50% 0,50% 100%);
}
100%{
clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
}
}<div class = "animation">
Testing
</div>Благодарим @KendallFrey за идею клипа.
@KoshVery Поддержка значительно увеличивается, если учесть префикс -webkit.
Думаю, не повезло пользователям браузеров Microsoft.
Вы можете попробовать выполнить переход width и использовать flex для выравнивания текста
.animation {
width: 100%;
font-size: 50px;
padding: 25px 0;
background: black;
color: white;
margin: 0 auto;
display: flex;
justify-content: center;
animation: grow 2s;
}
@keyframes grow {
0% {
width: 0;
}
100% {
width: 100%;
}
}<div class = "animation">
Testing
</div>Хотя это работает с этим примером, изменение with может привести к изменению размера и / или местоположения содержимого в div. Текст может переноситься по-разному и т. д. См. Следующий пример: jsfiddle.net/pahbs23L/1
Вам просто нужно добавить white-space: nowrap; в .animation
Интересно ... Это сработает для всего? width обычно лажает.
вот более простой способ без clip-path и полагаясь на flexbox
.animation{
width: 0%;
margin:auto;
display:flex;
justify-content: center;
white-space:nowrap;
font-size: 50px;
padding: 25px 0;
background: black;
color: white;
overflow:hidden;
transition:0.5s all;
}
body:hover .animation{
width:100%;
}<div class = "animation">
Testing
</div>Вы также можете поиграть с псевдоэлементом и фоном, если вам не нужна прозрачность:
.animation{
width: 100%;
text-align: center;
font-size: 50px;
padding: 25px 0;
background: black;
color: white;
position:relative;
}
.animation:before{
content:"";
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background:
linear-gradient(#fff,#fff)left/50.5% 100%,
linear-gradient(#fff,#fff)right/50.5% 100%;
background-repeat:no-repeat;
transition:0.5s all;
}
.animation:hover::before {
background-size:0% 100%;
}<div class = "animation">
Testing
</div>Еще одна идея с использованием box-shadow:
.animation{
width: 100%;
text-align: center;
font-size: 50px;
padding: 25px 0;
background: black;
color: white;
position:relative;
box-shadow:
50vw 0 0 #fff inset,
-50vw 0 0 #fff inset;
transition:0.5s all;
}
.animation:hover {
box-shadow:
0 0 0 #fff inset,
0 0 0 #fff inset;
}<div class = "animation">
Testing
</div>Как вам эти выпадающие списки? XD
@JBis при редактировании сниппета есть несколько опций внизу слева;)
Думаю, я воспользуюсь твоим ответом. Спасибо!
clip-pathне очень хорош поддерживается в браузерах.