A little note about using transitions...
You guys might be aware of this but since I only switched over to foundation a few days ago I thought I might just note a little thing I noticed with my first look at using transitions, more a fly by than anything for now but...
When you want to add in a transition on an element say let's say ease. If you click on all properties you'll see the ease function is already highlighted, you might assume that it will be included in the CSS since ease is already highlighted so you select your duration and delay.
Well I found out you have to actually select another function first, say linear, then go back to ease and select it. Only then it'll get written to the CSS. You can confirm that by using the inspector or by viewing the main CSS source code.
When you want to add in a transition on an element say let's say ease. If you click on all properties you'll see the ease function is already highlighted, you might assume that it will be included in the CSS since ease is already highlighted so you select your duration and delay.
Well I found out you have to actually select another function first, say linear, then go back to ease and select it. Only then it'll get written to the CSS. You can confirm that by using the inspector or by viewing the main CSS source code.
I think 'ease' is the default value, though. So if there is no transition listed it defaults to ease so no extra code is needed.
https://www.w3schools.com/cssref/css3_p … nction.asp
https://www.w3schools.com/cssref/css3_p … nction.asp
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
And it appears if deleting the transition the css remains....just with 0 values so some cleanup on reset styles is required.
Bootstrap 5 CSS Grid.
Jeff, you know I always wrote it in by hand and never noticed that ease was the default.
Your Universe site is an excellent example for using those effects by the way, it's a sweet looking website. Must have taken a lot of back end work getting those images correct so they look as nice as they do.
Twinstream, you can use reset to remove those.
Go back to the element in Design and select choose a style to reset, and you can reset it all or just the transitions for example.

Twinstream, you can use reset to remove those.
Go back to the element in Design and select choose a style to reset, and you can reset it all or just the transitions for example.
I had to look up weather 'ease' was the default or not but I had a feeling. I don't come from a coding background so most of the time I totally would miss anything such as default states, 
Thanks for the kind words regarding the Universe site. It was a labor of love for me and also a good excuse to get more familiar with the CoffeeCup products.
I used primitive.js to convert all the images into svg files. It's pretty fun to play with even if you aren't going to use it for an actual project.
https://ondras.github.io/primitive.js/

Thanks for the kind words regarding the Universe site. It was a labor of love for me and also a good excuse to get more familiar with the CoffeeCup products.
I used primitive.js to convert all the images into svg files. It's pretty fun to play with even if you aren't going to use it for an actual project.
https://ondras.github.io/primitive.js/
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.