css动画效果的各种实现方法与区分，使用transition实现一个简单的翻牌效果

html-css07

css动画效果的各种实现方法与区分，使用transition实现一个简单的翻牌效果,第1张

感觉自己总是混淆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

规定是否应该轮流反向播放动画。

看你是如何实现的

一般来说，增加动画可以使用：animation ,想要过渡的话使用transition.

transition: 参考 http://www.w3school.com.cn/cssref/pr_transition.asp

animation:参考 http://www.w3school.com.cn/cssref/pr_animation.asp

W3school资料还是很好的。