Animatable properties can change gradually from one value to another, like size, numbers, percentage and color.
The border shorthand property sets all the border properties in one declaration.
The properties that can be set, are (in order): border-width, border-style, and border-color.
It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed.
The border shorthand property sets all the border properties in one declaration.
The properties that can be set, are (in order): border-width, border-style, and border-color.
It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#anim {
animation: animation_name 2s infinite;
}
@-webkit-keyframes animation_name {
from {
border: 1px solid green;
}
to {
border: 10px dotted red;
}
}
@keyframes animation_name {
from {
border: 1px solid green;
}
to {
border: 10px dotted red;
}
}
</style>
</head>
<body>
<div id="anim">
Border Animation
</div>
</body>
</html>
Css:- The border animation
Reviewed by Network security
on
May 23, 2019
Rating:
No comments: