https://github.com/kibria-khandaker/cricket_match_animation

Cricket match animation using transition and transform , css3
https://github.com/kibria-khandaker/cricket_match_animation

Last synced: 2 months ago
JSON representation

Cricket match animation using transition and transform , css3

• Host: GitHub
• URL: https://github.com/kibria-khandaker/cricket_match_animation
• Owner: kibria-khandaker
• Created: 2022-01-09T12:22:08.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-09T13:54:19.000Z (over 3 years ago)
• Last Synced: 2025-01-26T06:25:18.186Z (4 months ago)
• Language: HTML
• Homepage: https://kibria-khandaker.github.io/cricket_match_animation/
• Size: 94.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS Animation or CSS3 Animation

### Cricket match animation using transition and transform

All `CSS code` for Learning.

```css

.field {

  border-right: 1px dotted lightcoral;

  width: 150px;

  cursor: cell;

}

.bat {

  transition: transform 0.2s ease-in;

}

.field:hover .bat {

  transform: rotate(-35deg);

  transform-origin: top right;

}

.ball {

  width: 50px;

  height: 50px;

  background-color: rgb(224, 22, 22);

  border-radius: 50%;

  position: relative;

  left: 316px;

  bottom: 75px;

  transition: transform 1s ease-out 0.2s;

}

.field:hover .ball {

  transform: translate(800px, -70px);

}

```

All `HTML code` for Learning.

```html

  

    

    

    

    Cricket match animation using transition and transform

    

  

  

    


      

      


    

  


```