https://github.com/deadlybyte/motd-css-animations

BBC's Match of the Day (MOTD) inspired CSS Animations.
https://github.com/deadlybyte/motd-css-animations

css css-animations football html-css motd

Last synced: 5 days ago
JSON representation

BBC's Match of the Day (MOTD) inspired CSS Animations.

• Host: GitHub
• URL: https://github.com/deadlybyte/motd-css-animations
• Owner: deadlybyte
• License: mit
• Created: 2018-10-11T08:16:01.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-11-13T17:01:45.000Z (over 7 years ago)
• Last Synced: 2024-07-17T21:04:41.521Z (about 2 years ago)
• Topics: css, css-animations, football, html-css, motd
• Language: HTML
• Homepage:
• Size: 11.3 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# BBC's Match of the Day (MOTD) inspired CSS Animations.

I'm an avid football (soccer) fan (Wolverhampton Wanderers 🐺 / AFC Bournemouth 🍒) and like nothing better than sitting down to watch the Premier League highlights on BBC's MOTD on a Saturday evening. After a game's highlights, the players and managers are interviewed and while these interviews are taking place, an array of stats and information is displayed to the viewer. This is achieved using fancy animation techniques which draw attention to key information. I've always been impressed with this and it looks super cool.

![MOTD Match Stat's Animation Sequence](motd-match-stats-animation.gif)

Feeling inspired, I wanted to recreate some of these animation sequences via CSS. This was a good opportunity to practise and learn new skills. I've done CSS animations before, but all out of the box and have used third party frameworks. So as these were bespoke animation sequences, I had to take the plunge and actually learn what those CSS animation related attributes did.