入门css3动画

BDEEFE 发布于2019-08-30 15:43 / 1405人阅读

摘要：入门动画为了让页面体验更为流畅，我们在更多的时候都会采用一些动画给页面流程增加一些耦合性动画分为两类过渡动画从一个状态变为另一个状态一个宽高都为，鼠标移上后变为宽高各这时候我们就可以用到过渡动画关键帧动画一个动画定义多个关键帧，实现更为复杂

入门css3动画

为了让页面体验更为流畅，我们在更多的时候都会采用一些动画给页面流程增加一些耦合性

css3动画分为两类 1. 过渡动画transition(从一个状态变为另一个状态)

eg:一个div宽高都为100px，鼠标移上后变为宽高各300px
```
div {
    width: 100px;
    height: 100px;
}
div:hover {
    width: 300px;
    height: 300px;
}
```
这时候我们就可以用到过渡动画
```
div {
    width: 100px;
    height: 100px;
    transition: width 3s, height 3s;
}
```

2. 关键帧动画keyframes(一个动画定义多个关键帧，实现更为复杂的动画)

定义一个关键帧动画

// 关键帧的书写很灵活，一行可以写多个关键帧
@keyframes 动画名 {
    0% {...}
    ...
    /** 时间点 元素状态 **/
    ...
    100% {...}
}

将关键帧动画绑到元素上，需要使用animation属性

GPU云服务器云服务器 css3动画高性能css3动画 css3 css3气泡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116038.html

个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0