Для создания плавного появления и анимации при наведении на элемент можно использовать свойства `transition` и `animation` в CSS.
Вот пример кода HTML и CSS, чтобы показать, как это можно сделать:
HTML:
```html
<div class="box"></div>
```
CSS:
```css
.box {
width: 100px;
height: 100px;
background-color: red;
opacity: 0; /* начальное значение прозрачности элемента */
transition: opacity 0.5s; /* добавляем плавный переход для свойства прозрачности */
}
.box:hover {
opacity: 1; /* изменяем прозрачность при наведении */
animation: rotate 2s infinite; /* добавляем анимацию при наведении */
}
@keyframes rotate {
0% {
transform: rotate(0deg); /* начальное значение поворота */
}
100% {
transform: rotate(360deg); /* конечное значение поворота */
}
}
```
В данном примере блок `.box` начинает с нулевой прозрачности (`opacity: 0`) и имеет плавный переход при изменении этого свойства (`transition: opacity 0.5s`). При наведении на блок, прозрачность становится 1 (`opacity: 1`), а также начинается анимация вращения (`animation: rotate 2s infinite`). Анимация задается с помощью `@keyframes`, где мы определяем начальное и конечное значения поворота элемента.
Теперь, когда вы наведете указатель мыши на элемент с классом `.box`, он плавно появится и начнет вращаться.