How to define the shape of the corners is animatable using CSS ?
The task is to animate the shape of all corners using the CSS. Cascading Style Sheets(CSS) is a language used to give style to the web page.
Properties used: In this article, we will make use of the following properties
- animation: This property is used to change one form of the style to another.
- border-bottom-right-radius: This property is used to define the radius of the bottom-right corner.
- border-bottom-left-radius: This property is used to define the radius of the bottom-left corner.
- border-top-left-radius: This property is used to define the radius of the top-left corner.
- border-top-right-radius: This property is used to define the radius of the bottom-left corner.
- @Keyframes rule: This rule is used to animate the changes gradually from the current style to the new style at certain times.
Approach:
The first task is to create the basic HTML page structure with the style element. After creating the style tag into the head tag, we will add the border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-top-right-radius properties to style all the corners and also provide the animation with the help of the animation property.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html><html><head> <style> body { text-align: center; } h2 { margin-left: 10px; margin-top: 30px; margin-right: 15px; background-color: lightgreen; border: 5px solid green; height: 100px; animation: mymove 5s infinite; } @keyframes mymove { 60% { border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; } } </style></head><body> <h2>GeeksforGeeks</h2></body></html> |
Output:
animations of all corners
Please Login to comment...