Session 1: Today’s inclass demonstrations will involve typical uses for CSS3 transitions and animations. CSS3 transitions and animations are an easy and generally accessible way to integrate motion into your designs. Most transitions are initiated via the hover pseudo class. Animations begin when the page loads. Uses include: navigation, thumbnail fades, image captions, sliders, etc.
Relevant links:
CSS Transitions of W3Schools
CSS Transition Tutorial
CSS Filter Property
Interactive Guide to CSS Transitions
Trigger CSS3 Transitions on Click
MDN: Using CSS Transitions
Session 2: Today we will be critiquing your design mockups. Please be prepared to show your mockups to your assigned group members. I will visit each group and provide additional feedback.
Final Web Application Milestone #1
Due: Week 11, Session 2 (before class starts: 2 points)
1. Be prepared to show your template work-in-progress
2. Demonstrate navigation with both primary and secondary items
3. Illustrate your ability with fluid layout, floats, asides, and typesetting
https://robots.thoughtbot.com/transitions-and-transforms
This website breaks down what CSS transitions and transforms are for beginners. It goes through step by step and gives great examples and easy to follow directions!
http://www.webdesignerdepot.com/2010/01/css-transitions-101/
This website gives examples of different kind of transitions you can use. It tells us what can be transitioned, basic transitions, how to do multiple transitions, and how transitions will effect certain aspects of your website.
http://learn.shayhowe.com/advanced-html-css/transitions-animations/
This website gives a ton of information on anything you’d want to know about transitions. It has demos and in-depth information on duration, delays, timing and much more.
http://www.creativebloq.com/css3/animation-with-css3-712437#null
This website shows 22 “stunning” examples of CSS3 Transitions. I like this website because it shows a ton of really cool different transitions that most people would never think of. It’s interesting to see people get really creative with the transitions.
https://robots.thoughtbot.com/css-animation-for-beginners
This website shows CSS3 animations for beginners. This gives examples and code to use in your own work which is very helpful.
http://learn.shayhowe.com/advanced-html-css/transitions-animations/
This website gives a more in depth look at transitions and animations. It provides helpful information such as delay times, duration, timing and it also gives demos of each type.
For anyone looking for color inspiration for their final web app, here is a link with color palette ideas.
https://designschool.canva.com/blog/brand-color-palette/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
This website shows many examples of CSS3 transitions and how they can be hovered. Also, Using transitions when highlighting menus.
http://learn.shayhowe.com/advanced-html-css/transitions-animations/
This website shows examples of both the transitions and animations.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
This Website tells you about Defining the animation sequence using keyframes and provide some examples.
http://www.smashingapps.com/2016/03/16/10-css3-animation-scripts-for-your-next-projects.html
This website outlines 10 outstanding CSS3 animation scripts and provides tutorials for effects like flip, rotate, image hover, bounce, blink, zoom, scroll and more.
http://www.justinaguilar.com/animations/index.html
This website is a CSS3 animation cheat sheet. The concepts are simplified and provide code with step by step instruction on how to implement these animations.
http://www.tutoriallounge.com/2014/09/css3-transitions-and-animation-tutorials/
This website provides code that ranges in skill level through 35 useful CSS3 transition and animation tutorials. If you click on an option provided it will direct you to a new page and give it’s own tutorial.
https://webflow.com/ix2
This website’s homepage is an example of cool uses for CCS3. The center font follows the curser’s movement slightly showing how the slide animation can work. The homepage also features rotating objects.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
This website features instructions for different types of transitions and animations such as slide, key frame, repeat, and move back and forth.
https://codepen.io/ajerez/pen/EaEEOW
This site features a cute little CSS3 animation. Site shows HTML, CSS, and JS.
https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/
This website offers good ideas to consider when designing an effective website, and offers ideas for user experience.
https://blog.hubspot.com/blog/tabid/6307/bid/30557/6-guidelines-for-exceptional-website-design-and-usability.aspx
This site provides some main points about designing an effective, usable website for viewers to get the most out of your site.
http://bashooka.com/coding/css-animation-tips-tricks-and-tutorials/
This site offers a variety of animation techniques. They provide a brief explanation of the tip and then you can click on the image to go to a web page that expands with more information.
https://codeburst.io/css-transitions-and-animations-motion-path-module-css-a4d62d6ee802
This article first summarizes the need for CSS transitions and then goes into CSS animations. For each example, it gives a brief example of the CSS code and a visual of what the animation looks like. The article also gives demonstrations on how to use motion path module in CSS that “create routed movement of the objects through a special motion-path property.”
https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/
This article gives “8 simple CSS3 transitions that will wow your users”. The article goes into step by step processes that will allow your users to see your content in all new ways. It shows you the code of how to fade in, change color, grow, shrink, rotate, square to circle, 3d shadow, swing, and insert borders. Super easy to follow instructions and graphics to guide you along!
http://webdesignerwall.com/tutorials/easy-css-animation-transition-transforms
This article goes into more in depth ways of how to create transitions. It has a cool visual learning option in the lower portion of the article with many different ways of how to use transitions and what they do. The best part of the article is the transforms with visuals paired with the CSS and HTML coding attached.
https://thoughtbot.com/blog/transitions-and-transforms
This website is awesome if you are new to CSS transitions and want to learn more about how to keep a simple, subtle, but consistent flow to a webpage. My favorite part about this page is the fact that it has interactive models showing exactly what the words are explaining in the demonstration. Check it out!
https://zinoui.com/blog/css-transitions
This article highlights the differences between CSS transitions and animations. I myself had a hard time understanding the differences between the two, but after reading this page and looking over the coding examples it provided, I now understand. With using of CSS transitions, you can slow down the changes and adjust the effect how they will be applied.
https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/
This was my favorite article to read as it mentions 8 simple CSS transitions that have been proven to wow users of any site. I think the “grow” and “shrink” transitions have a very cool effect, and I could really see myself using this in my final project. Make sure to check out this article if you want to take your transitions to a whole new level!
https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_count
(Original Article: https://www.w3schools.com/css/css3_animations.asp)
This article highlights a really helpful way to make your animations on your website run for only a specific number of times. For example, if you want your animation to occur three times, this article will show you how to do that.
https://daneden.github.io/animate.css/
This is a really cool website I found that can give you some helpful CSS code for specific word animations. I found this really helpful because if you want a specific animation for a header, this page will help you learn the code to make it happen.
https://thoughtbot.com/blog/css-animation-for-beginners
This article is really helpful because it shows you how to code animations from a beginner level, and then it works up to advanced animations. I really like this website because it shows you examples of how to make the effects happen, but lets you decide what images you want animate.
This website talks about the history of css and gives examples different types attributes. The attributes have links that you can click and know more about it. it is helpful because it has css model status and levels.
This is really helpful website and it gives you more about transition. it is also gives examples of transition. There is transition properties, duration, timing function, and delay with examples.
I really like this website of not only how it is organized but also the information it’s giving. This website will work over the examples it gives and how it works. check it out
I was looking for ways to create an interesting second navigation bar that could be used on either the side or the bottom. This first link is a video that shows how to do fixed bottom navigation that I think will be a cool addition to the final project for easy navigation towards the end of each page.
https://youtu.be/fTd6wLI6AME
The second link is from W3 schools and it was a good reminder about the way to implement color directly into the HTML and not into the CSS which can be good to do quick individual color changes.
https://www.w3schools.com/html/html_colors.asp
This last link is from MDN Web Docs and it goes over the definitions of CSS transitions. I thought that this article does a nice job describing what transitions and animations are, which will be helpful with upcoming projects!
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
4 Ways to Animate the Color of a Text Link on Hover (https://css-tricks.com/4-ways-to-animate-the-color-of-a-text-link-on-hover/)
-> This website showcases and explains four ways to use the transition effect to animate the color of a text link on hover while considering accessibility, performance and browser support and achieve the same effect. This also shows that they may be several different techniques (and code combinations) that in the end, accomplish the same goal.
Adam Argyle’s Sick Mouse-Out CSS Hover Effect (https://css-tricks.com/adam-argyles-sick-mouse-out-css-hover-effect/)
-> This article demonstrates, step by step (which I thought facilitated learning, and not just copying the code), how to create a mouse-out CSS hover effect using transition and transform. The code is complex and the effect is achieved using several lines of code, but the end result is fun and can definitely add to a webapp.
Transitions (https://web.dev/learn/css/transitions/)
-> I liked this article because it explained the basics of transition properties and transition triggers.
https://thoughtbot.com/blog/transitions-and-transforms
This website is a CSS transition and transforms guide for beginners. I really like this website because it is very straightforward and user friendly. It not only talks about the different transitions and transforms, but it also shows an interactive example of each along with the code needed to achieve it.
https://blog.hubspot.com/website/css-animation-examples
This website is a CSS animation guide. It provides various CSS animation examples. I really like the interactive nature of this website. For each example, it shows the reader the corresponding CSS code and what the code creates.
https://alvarotrigo.com/blog/css-page-transitions/
This website talks about CSS page transitions. It has 19 interactive page transition examples. Like the websites above, this one shows the CSS code needed for the transition and an interactive example of the transition.
https://www.jotform.com/blog/simplicity-in-good-web-design-advantages-how-to/
Professor Keston and I were discussing simplicity yesterday afternoon. We were talking about how many applications these days are streamlined and geared specifically to fit algorithms and be as efficient as possible, and whether this is a good or bad thing. Especially after trying to design mockups for the final, I was looking for ways to stick to simplicity for ease of use, but also come up with cool, unique website designs. I think there are some interesting points here that are worth reading. I also really liked the examples, especially the Belvoir one, which integrated some very cool design choices with an overall simple feel.
https://codinhood.com/micro/10-dropdown-menu-animations-css-transform
I really like the concept of animated dropdown menus. Some examples of how creative you can get, especially when you use SASS, which apparently is like CSS but with the addition of variables. Some of these are over the top, but might give you some ideas of how you could set up your site. Perhaps in class we can discuss what the advantages/disadvantages of SASS are, since we’ve only used CSS thusfar.
https://alvarotrigo.com/blog/css-page-transitions/
We haven’t gotten into JavaScript yet, but one thing I keep thinking about with this final project is how to transition between pages seamlessly. A big part of me wants to not have separate html files for each component. This article shows some entire page transition examples and some ways to use both CSS and JavaScript to make them. This might give the user a more interactive and attention-getting experience than simply clicking a button and having to load a new page each time. I assume that these types of transitions work best when you’ve got minimal media content to load, since they are technically all one webpage rather than separate html docs.
https://www.compress2go.com/compress-to-jpg
Our class, Web Design 358, has many tasks regarding putting images into our websites, so I wanted to make my Google Fu about three links for ways to compress images. That way, they will be easier to put on webpages. This first one is one I have been using for another digital media class I currently take, and is for compressing images to the JPG format.
https://www.giftofspeed.com/jpg-compressor/
This second link has a similar function as the first JPG compressor, and like the first one, is free. However, an important consideration is that this one is way faster, so is more time efficient.
https://tinypng.com/
This third link is similar to the first and second for the most part. Tinypng.com allows not only JPG images, but also WebP, and PNG images to be compressed, so in these ways, I would argue is the best of the three links, as it allows for the most types of images to be compressed.
https://web.dev/learn/accessibility/welcome
This website provides those new to accessibility with a guide on how to make websites and internet features more accessible. It specifically lays out coding formats that are right and coding formats that are wrong in terms of being more accessible. It includes many web elements like images, JavaScript and typography and how to make them more user-friendly for all people.
https://www.linkedin.com/advice/1/what-benefits-making-your-html-code-accessible-skills-programming
This website is a guide to why accessibility is important. It details the benefits that come from knowing how to make content more accessible from a professional standpoint. Not only is digital accessibility helpful for those who need it, it is also a exponentially growing business and is highly profitable for those who know how to implement it.
https://stthomas.instructure.com/enroll/68JHCC
This link is to a Digital Accessibility Basics course that is new to St. Thomas. It includes modules that explain digital accessibility and offers quizzes to test for comprehension. Once the course is completed, St. Thomas students can put a Digital Accessibility Basics Badge in their biography of their resume to show potential employers that they have taken this course.
https://joshcollinsworth.com/blog/great-transitions
This site has some tips for using CSS transitions and talks about some common mistakes that people make when starting to use/learn transitions. It’s short but goes enough in-depth to make sense to beginners. Some of the later tips are a bit more complicated but I think the first few are helpful.
https://blog.hubspot.com/website/css-animation-examples
This site has some cool examples and creative ideas. I like some loading examples and the color fan, which I would love to implement in my project if I can figure it out. Some have different coding languages like JavaScript but there are still some good ones that only use CSS.
https://web.dev/learn/css/transitions
This site shows examples and explanations similar to W3schools but I think it’s a little easier to understand and see the results of each transition. I especially like how each feature has the names for what’s being done to it. This helped me conceptualize the names of each transition more and understand how the code relates.
https://learn.shayhowe.com/advanced-html-css/transitions-animations/
This website gives a nice overview of transitions and animations that gets straight to the point. Though there may be some random specifics it does not cover it has a lot of really helpful information about many different types of transitions you can use and how to use them.
https://www.freecodecamp.org/news/css-transition-vs-css-animation-handbook/
This website is great in that it also gives a good overview and covers a lot of ground but what sets it apart is it does it in an easy to understand/consume way. It does a good job of examining exactly how things work and provides many different examples of things you can do and how to execute them successfully.
https://blog.hubspot.com/website/css-transition-vs-animation
This website is a bit different from the previous two in that it doesn’t show as many examples but instead focuses on explaining transitions and animations from a less-technical standpoint. Specifically it explains the difference between the two and how to understand them on a deeper level.
https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025
This website dives into several CSS transitions and animations that people may not know about. It provides a brief description of each animation/transition, video examples to demonstrate what it can do, code to show how to implement it, and also some general information as well as various tips and tricks on using it.
https://graygrids.com/blog/best-css-javascript-animation-libraries
This website provides 10 options for both CSS3 and JavaScript animation libraries and plugins. For each library or plugin, this website provides a brief description as well as an image. This is a good place to look when trying to decide what CSS3 or JavaScript library to use because it says that these 10 libraries are the best ones out there at this time.
https://blog.avada.io/css/animation-examples
This website has 49 examples of CSS animations. These examples are a good place to look for inspiration and ideas when coming up with your own CSS animations. It’s really remarkable to see the different animations other people have made.
https://web.dev/learn/css/transitions
This website includes a good introduction to CSS transition and also includes a podcast and visuals making it very accessible. The visuals are clearly described and make it a good beginner website that is not too overwhelming.
https://stackoverflow.com/questions/20586143/css-animation-vs-transition
This website is fairly simple and easy to understand. It lays out the code needed so users can double check that their work is correct. The website lays out different versions and also lists the pros and cons of these approaches.
https://animate.style/
This website is very visually appealing with lots of examples of CSS transitions. The sites is organized very clearly and shows the exact code needed to accomplish the transitions it shows. It is also organized into categories such as basic usage, using keyframes, and CSs custom Properties.
https://www.sitepoint.com/how-to-get-started-with-css-animation/
This website is a guide on how to get started with CSS animation. The website explains the key differences between CSS animations and transitions, teaches you how to make an animation, and gives you skills to make your own unique animation
https://prismic.io/blog/css-animation-examples
This website list 39 animation examples with the codes and what it would look like if you were to use it. The animation examples are separated into categories depending on what aesthetic you are going for.
https://www.sliderrevolution.com/resources/css-page-transitions/
This website includes 50 examples of CSS page transitions to help create a better user experience. The examples are shown and they give you the code in 3 different formats; CSS, HTML, and Babel.