石乐志！CSS3动画animate爱你妹爱不动(⊙_⊙)
正在写CSS3动画，发现元素怎么都不动。
需求如下：让图片进行一个简单的循环位移。
文章图片
动画需求.png
代码如下：
/* 右上方气球 */
.section1 .ball {
right: 7%;
top: 13%;
}
/* 气球漂浮动画 */
.section1.animate .ball {
transition: theBall 3s infinite;
}
@keyframes theBall {
50%{
transform: translate(0, -20px);
}
}
（样式不会像JS那样报错，F11居然没有红小叉，有点失落）
瞅了半天，终于发现语句问题：
@keyframes应配合animate语句使用！ transform才是transition的另一半。 更正后如下：
/* 气球漂浮动画 */
.section1.animate .ball {
animation: theBall 3s infinite;
}
@keyframes theBall {
50%{
transform: translate(0, -20px);
}
}
实现效果：
文章图片
动画实现.gif 动画基本语法见：H5与CSS3动画基础https://www.jianshu.com/p/4e78cafe9138
【石乐志！CSS3动画animate爱你妹爱不动(⊙_⊙)】2018.1.11
推荐阅读
- 2018-04-16动画练习作业
- 好看的动画都有一只有趣的动物，CoCo也不例外
- vue|vue canvas 手绘进度条动画
- 锦囊26（手势动画打造微信页眉的GIF动图）
- 迪士尼动画新作《寻龙传说》——一群特别女孩的爱与守护
- SwiftUI|SwiftUI 动画组件之Lottie小型高质量交互式的开源动画文件格式
- 商业短片动画可以定制吗
- 每日记|每日记 （粉红猪小妹—更适合家长看的二次元动画）
- 21.css3轮播效果
- jQuery动画