With CSS and HTML, we can create simple animations for websites. Following is an example of a small CSS animation effect:
HTML:
```
CSS:
```
#box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: myanimation 2s infinite;
}
keyframes myanimation {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
```
In this example, we use `keyframes` rule to define the animation. The animation is set to run for 2 seconds infinitely. There are four stages of the animation which are defined using percentages.
At `0%` (start), the box is at the top left of the screen with a red color.
At `25%` (a quarter way through), the box has moved 200 pixels to the right and has changed the color to yellow.
At `50%` (halfway through), the box has moved 200 pixels to the bottom and has changed the color to blue.
At `75%` (three quarters way through), the box has moved 200 pixels to the left and has changed the color to green.
At `100%` (end), the box is back at the top left of the screen with a red color.
Please note you may need to use vendor prefixes for the animation properties for some older browsers. For example, `-webkit-animation` for Chrome/Safari or `-moz-animation` for Firefox.
