Сжимается и расти элемент, используя CSS3 -- css пол Связанный проблема

Shrink and grow an element using CSS3


4
vote

проблема

русский

Я пытаюсь реализовать расти и сокращать влияние на элемент div, это работает, но анимация работает слева направо. Хотел бы сделать это из центра.

Ниже я разместил код, а вот это widdle

 <код>     .elem {         position:absolute;         top : 50px;         background-color:yellow;         left:50px;         height:30px;         width:30px;         -webkit-transition-property: -webkit-transform;         -webkit-transition-duration: 1s;         -moz-transition-property: -moz-transform;         -moz-transition-duration: 1s;         -webkit-animation-name: grow;         -webkit-animation-duration: 2s;         -webkit-animation-iteration-count: infinite;         -webkit-animation-timing-function: linear;         -moz-animation-name: grow;         -moz-animation-duration: 2s;         -moz-animation-iteration-count: infinite;         -moz-animation-timing-function: linear;     }     @-webkit-keyframes grow {         from {             height:30px;             width:30px         }         to {             height:130px;             width:130px         }     }     @-moz-keyframes grow {         from {     height:30px;     width:30px } to {     height:130px;     width:130px }     }   

Как я могу сделать это.

Английский оригинал

I am trying to implement a grow and shrink effect on DIV element, this is working but the animation is working from left to right. Would like to make it from center.

Below I have placed the code, and here is the fiddle

    .elem {         position:absolute;         top : 50px;         background-color:yellow;         left:50px;         height:30px;         width:30px;         -webkit-transition-property: -webkit-transform;         -webkit-transition-duration: 1s;         -moz-transition-property: -moz-transform;         -moz-transition-duration: 1s;         -webkit-animation-name: grow;         -webkit-animation-duration: 2s;         -webkit-animation-iteration-count: infinite;         -webkit-animation-timing-function: linear;         -moz-animation-name: grow;         -moz-animation-duration: 2s;         -moz-animation-iteration-count: infinite;         -moz-animation-timing-function: linear;     }     @-webkit-keyframes grow {         from {             height:30px;             width:30px         }         to {             height:130px;             width:130px         }     }     @-moz-keyframes grow {         from {     height:30px;     width:30px } to {     height:130px;     width:130px }     } 

How can I do this.

</div
  

Список ответов

9
 
vote
vote
Лучший ответ
 

Используйте <код> transform: scale(n) вместо изменения ширины / высоты

 <код> @keyframes grow {     from {         transform: scale(1);     }     to {         transform: scale(4.333);     } }   

demo

Вам не нужно понадобиться префиксные версии браузера на данный момент.

Имейте в виду, что масштабирование элемента, как изображение на 4,3x, его полноразмерный, сделает его размытым, так что может быть лучше сделать по умолчанию (1 / 4.3) X для начала, а затем масштабировать его до 1 в анимация.

 

Use transform: scale(n) instead of changing the width/height

@keyframes grow {     from {         transform: scale(1);     }     to {         transform: scale(4.333);     } } 

Demo

You shouldn't need the browser prefixed versions at this point in time.

Keep in mind that scaling an element like an image to 4.3x its full size will make it blurry, so it might be better to make the default (1 / 4.3)x to start, then scale it up to 1 in the animation.

</div
 
 
   
   

Связанный проблема

0  Скрывая неупорядоченный список, когда у него нет элементов  ( Hiding an unordered list when it has no elements ) 
У меня есть проблема, которая кажется сначала, как общий язык No-Brainer и легкая задача. У меня есть плагин JavaScript на моей странице, который генерирует...

3  Scrolltop () не работает плавно в Chrome & Safari, но работают в Firefox  ( Scrolltop is not work smoothly in chrome safari but work in firefox ) 
Если вы проверяете эту ссылку http://jsfiddle.net/hbkdt/ . <код> $(window).scroll(function() { $(".fixed").css("top", $(window).scrollTop() + "px");...

6  Как я могу найти неиспользованные CSS в AJAX приложении?  ( How can i find unused css in ajax app ) 
Я искал, и я не могу найти какие-либо дополнения или JavaScript для поиска неиспользованных CSS в приложениях AJAX. Select-Me Selectors Можете сделать са...

-2  Как вы можете центрировать галерею с HTML и CSS  ( How can you center a gallery with html and css ) 
Я выхожу новый HTML и CSS и надеюсь, что кто-то может помочь. с помощью W3 Schools ( http://www.w3schools.com/css/css_image_gallery. ASP ) Я создал простую ...

0  Невозможно переопределить CSS по умолчанию всех стилей элементов с помощью медиа-запроса  ( Cannot override default css of all elements style with media query ) 
Я пытаюсь сделать один веб-сайт отзывчив. Проблема в том, что некоторые элементы настраиваются с медиа-запросами, тогда как другие хранят свой родной стиль .....

5  Пользовательский стиль на раскрывающемся меню React-Buttrap  ( Custom style on react bootstraps dropdown menu component ) 
Я пытаюсь применить пользовательский стиль CSS к компоненту RACH BETSTRAP, но не может понять, как получить доступ к элементам, которые не являются явными в J...

1  Инструмент / Утилита тоже анализируют и решают CSS современные браузерные причуды и особенности?  ( Tool utility too analyze and solve css modern browser quirks and pecularities ) 
в качестве старых браузеров, таких как IE7, проскальзывают в состояние неэлевантности я хочу сосредоточиться на поддержке современных браузеров хорошо ( IE9...

0  Как изменить цвет фона в jQuery  ( How to change background color in jquery ) 
Я хочу исчезать цвет фона, когда фокусируется; <код> $(document).ready(function() { $('.skiplink').focusin(function(){ $('#skip...

0  Почему изображение не отображается в Div в IE8  ( Why image doesnt show up within a div in ie8 ) 
У меня есть следующие HTML: <код> <!-- default stylesheets --> <link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css"> <!-- if ie version...

0  всплывающее окно не назначает центр экрана  ( Popup not assign the center of the screen ) 
У меня есть код ниже, чтобы назначить всплывающую точный центр экрана. Но это не работает. Всплывающее окно появляется в разных местах, основанных на размере ...

0  У меня проблема с переполнением моей контактной формы при отображении на мобильном  ( Im having an issue with my contact form overflowing when displayed on a mobile ) 
Выпуск в основном, когда у меня есть эта форма, отображаемая на мобильном телефоне, когда я перехожу на ввод текста в форму, Textarea слишком много расширяетс...

0  Маржа не действует должным образом в Firefox  ( Margin not acting properly in firefox ) 
У меня очень странная проблема, что за жизнь меня я могу решить. По сути, в Safari My Top Navigation не имеет верхнего поля и является промывкам с самой верхн...

1  Делая сова карусели жидкость / работа в процентах?  ( Making owl carousel liquid work in percentages ) 
У меня установлена ​​сова карусель, и она работает очень хорошо. Я доволен плагином, но что меня беспокоит, это то, что он не масштабируется с видом на просмо...

0  Как сделать левую и правую границу карты в ионном прозрачном  ( How to make the left and right border of a card in ionic transparent ) 
Ниже приведен мой HTML. У меня в общей сложности 3 карты в трех столбцах и хотите только левую и правую сторону быть прозрачными. Я пробовал устанавливать гра...

1  HTML: масштабные изображения с использованием максимальной высоты / ширины  ( Html scale images using max height width ) 
У меня есть веб-страница, которая отображает кучу изображений. Я хочу убедиться, что ни одно из изображений не превышает 200 пикселей шириной и 200 пикселей п...

Связанный проблема

0  Скрывая неупорядоченный список, когда у него нет элементов 
3  Scrolltop () не работает плавно в Chrome & Safari, но работают в Firefox 
6  Как я могу найти неиспользованные CSS в AJAX приложении? 
-2  Как вы можете центрировать галерею с HTML и CSS 
0  Невозможно переопределить CSS по умолчанию всех стилей элементов с помощью медиа-запроса 
5  Пользовательский стиль на раскрывающемся меню React-Buttrap 
1  Инструмент / Утилита тоже анализируют и решают CSS современные браузерные причуды и особенности? 
0  Как изменить цвет фона в jQuery 
0  Почему изображение не отображается в Div в IE8 
0  всплывающее окно не назначает центр экрана 
0  У меня проблема с переполнением моей контактной формы при отображении на мобильном 
0  Маржа не действует должным образом в Firefox 
1  Делая сова карусели жидкость / работа в процентах? 
0  Как сделать левую и правую границу карты в ионном прозрачном 
1  HTML: масштабные изображения с использованием максимальной высоты / ширины