Keyframe animations

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 1 week, 5 days ago.

Author Posts

deanphillips1991

Hey man,

Is it possible to write our keyframe animation and give it to elements using the GUI at all:

@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}

I’d like to give a bunch of elements a float like animation, and offset each one (delay?) so they all float but at different times.


Sebastian

Hi Dean,

Yes, simply add your keyframe code to the full code editor: View > Full code editor

You can then reference float in the animation-name field of Microthemer’s animation options.


deanphillips1991

Worked perfectly.

Is there anyway to enter a bunch of CSS (say 10 selectors given by O2 is one of their blog templates) and have that all split into selectors at all?


Sebastian

Hi Dean,

You can import multiple CSS selectors into the Microthemer interface via Packs > Import > CSS Stylesheet.

Just paste the CSS for the 10 selectors into the editor. Click the IMPORT button when you’re ready (bottom right of the screen). The config options and REVIEW BEFORE IMPORTING button might be helpful first however.

Please let me know if you need any help with that.

Cheers,
Sebastian

You must login or register to reply to this topic.