HTML:
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<div id="map"></div>
Javascript:
ymaps.ready(init);
function init(){
var myMap=new ymaps.Map("map",{
center:[59.974504,30.550266],
zoom:11,
controls:['zoomControl']
}),
Placemark1=new ymaps.Placemark([60.002148,30.272623],{
balloonContent:'Балун 1',
hintContent:'Стандартный значок метки 1',
},{
preset:'islands#redDotIcon'
}),
Placemark2=new ymaps.Placemark([59.935935,30.363452],{
balloonContent:'Балун 2',
hintContent:'Стандартный значок метки 2',
},{
preset:'islands#redDotIcon'
});
myMap.geoObjects.add(Placemark1).add(Placemark2);
myMap.behaviors.disable('scrollZoom');
}
CSS:
#map{
height:390px;
}
[class*="ymaps-2"][class*="-ground-pane"]{
filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter:grayscale(100%);
}
На основе: http://jsfiddle.net/9aj8j/76/
.block{
column-count:2;
column-gap:30px;
}
column-gap
— межколоночный интервал
@keyframes trambling-animation{
0%,50%,100%{
transform:rotate(0deg);
}
10%,30%{
transform:rotate(-10deg);
}
20%,40%{
transform:rotate(10deg);
}
}
.trambling{
animation:1.2s ease-in-out 0s normal none infinite running trambling-animation;
}
LESS с поддержкой старых браузеров
.transform(@transform){
-moz-transform:@transform;
-ms-transform:@transform;
-webkit-transform:@transform;
-o-transform:@transform;
transform:@transform;
}
.animation(@animation){
-webkit-animation:@animation;
-moz-animation:@animation;
-o-animation:@animation;
animation:@animation;
}
@keyframes trambling-animation{
0%,50%,100%{
.transform(rotate(0deg));
}
10%,30%{
.transform(rotate(-10deg));
}
20%,40%{
.transform(rotate(10deg));
}
}
.trambling{
.animation(1.2s ease-in-out 0s normal none infinite running trambling-animation);
}
Или используйте jquery плагин jRumble:
https://jackrugile.com/jrumble/