感觉自己总是混淆css各种动画效果，所以再这里总结一下
1. transition ，所在元素块样式变动时启动，可用于样式变动时 产生过渡动画效果
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
2. tranform :用于平移，旋转，缩放，透视
语法
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。值：0-100%,from（与 0% 相同）,to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。
4.@media :可以根据屏幕大小响应式改变样式
接下来利用transition和transfrom实现一个简单的翻牌效果,先看效果
一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe 名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
多去练习，多记，多敲。慢慢的你就会记住他们，熟能生巧，千万不要手懒。随着互联网的发展，前端的概念也在悄然发生的改变。早些年学完HTML+CSS就可以找到一份很好的工作，后来企业又要求必须会写特效，所以很多人又开始学jQuery，可是现在又要求必须要会js原生。原来必须要使用JS才能实现的一部分特效，现在HTML5新增的标签已经可以帮我们实现了，原来要写一堆jquery做出的动画，现在用CSS3也能实现了。
学了这么多，够吗？显然不行！！！原来前端普通的DOM操作数据，也逐渐的被像vue.js这样的MVVM框架所取代，原来要依靠PHP、.NET、JAVA等语言开发后台才能实现数据的前后台交互，现在node.js也出来了，它直接让JS可以在服务器端运行了，借助它的模块化可以完成所有的功能。从某种意义上来讲，搞web开发，后台语言甚至变成了配角，直接写个接口，剩下的什么都不用你管，我前端全包了。
所以说，学完HTML+CSS能算是万里长征刚走完了第一步，你要完成PC端的案例简直是太多了，网站随例一搜就是一大堆，京东、淘宝你直接模仿制就可以了。下一步要把js、node.js、vue.js好好学一下，特别是移动端开发、微信小程序，因为你面试的时候基本上没有人会让你做个PC页面，问的都前端特别流程的技术和框架。
希望我的回答能帮到你。
