css3 columns + responsive layouts: animate item position changes.using css3 or jquery/javascript -


i'm creating masonry style layout css3 columns instead allowed me build layout greater ease , more precisely, since i'm building responsive layout.

now, i'm using css3 media queries change amount of columns displayed based on size of window. want animate change in position of elements of columns between columns when number of columns change window resized.

here of css code:

@media , (min-width: 961px) , (max-width: 1599px){     #portfolio {         width:100%;         position:relative;         text-align:center;         -moz-column-count:4;         -moz-column-gap:3px;         -webkit-column-count:4;         -webkit-column-gap:3px;         column-count:4;         column-gap:3px;     } } @media , (min-width: 1600px){     #portfolio {         width:100%;         position:relative;         text-align:center;         -moz-column-count:5;         -moz-column-gap:3px;         -webkit-column-count:5;         -webkit-column-gap:3px;         column-count:5;         column-gap:3px;     } }

anyone know how approach this? tia.

see animation-property:

/* animation property */ animation-property: width; animation-property: height; transition-duration: 1s; /* webkit */ -webkit-animation-property: width; -webkit-animation-property: height; -webkit-transition-duration: 1s; /* moz */ -moz-animation-property: width; -moz-animation-property: height; -moz-transition-duration: 1s; /* opera */ -o-animation-property: width; -o-animation-property: height; -o-transition-duration: 1s;

example: http://theboywhocriedfox.com/demo/animate-transitions-with-media-queries/


Comments

Post a Comment

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

i've tried various ways coerce xterm (versions 285 , 292) copy selection clipboard clipboard whenever press ctrl-shift-c. promising way far has been, in ~/.xresources, put this: xterm*vt100.translations: #override \ ctrl shift <keypress> c: copy-selection(clipboard) \n\ ctrl shift <keypress> v: insert-selection(clipboard) ctrl-shift-v works perfectly, copying has nuance... if restart xterm, highlighting text puts things in primary clipboard; expected, proper, default behavior. if hit ctrl-shift-c, copies current selection clipboard clipboard. the bug, however, if highlight text after first time pressed ctrl-shift-c, you'll see highlighting copies both primary and clipboard. cannot figure out how stop xterm updating clipboard upon selection... , doesn't make sense me in first place. i said, @ specific point in time, copy selection clipboard... yet starts updating automatically upon selection after doing once... anyone have workaround...
Read more

qt - Errors in generated MOC files for QT5 from cmake -

i generated moc files qt5 using set (cmake_automoc on) set(cmake_include_current_dir on) then add moc files src using set(src src/main.cpp src/video_widget_surface.cpp src/video_widget.cpp src/video_player.cpp #moc files moc/moc_video_player.cpp moc/moc_video_widget.cpp moc/moc_video_widget_surface.cpp finally add executable using add_executable(somegui ${src}) but errors in moc files saying : /other/workspace/perception/somestuff/moc/moc_video_widget.cpp:54:6: error: 'videowidget' has not been declared /other/workspace/perception/somestuff/moc/moc_video_widget.cpp:62:19: error: 'videowidget' has not been declared /other/workspace/perception/somestuff/moc/moc_video_widget.cpp:68:20: error: 'videowidget' has not been declared /other/workspace/perception/somestuff/moc/moc_video_widget.cpp:68:46: error: non-member function 'const qmetaobject* metaobject()' cannot have cv-qualifier /other/qt5.0.1/5.0.1/gcc_64/include/qtcore/qo...
Read more