本文介绍了关于“如何在css3中实现旋转动画”的知识。很多人在实际案件操作中都会遇到这样的困难。接下来，让边肖带领大家学习如何应对这些情况！希望大家认真阅读，学点东西！
实现方法：1。使用“@关键帧动画名称{ 50% { transform : rotate }”；}”语句创建旋转动画；2.使用“元素{ animation:动画名称时间无限；语句将旋转动画应用于指定的元素。
本教程操作环境：windows7系统，CSS3HTML5第5版，戴尔G3电脑。
css3实现一个旋转的动画
1、想要利用css3实现动画就需要使用animation属性和“@keyframes”规则。
@关键帧是CSS3的一个规则，可以用来定义CSS动画一个循环的行为，创建简单的动画。
动画类似于变换，因为它们都是随时间变化的CSS属性的代表值。主要区别在于，当属性值发生变化时(例如，悬停时，属性值发生变化)，会隐式触发转换，但在应用动画属性时会显式执行动画。因此，动画需要显示动画属性的显式值。这些值由@关键帧规则中指定的动画关键帧定义。因此，@关键帧规则由一组封装的CSS样式规则组成，这些规则描述属性值如何随时间变化。
然后，使用不同的CSS动画属性，您可以控制动画的许多不同方面，包括动画迭代的次数，它是否在开始和结束值之间交替，以及动画应该运行还是暂停。动画也可以延迟其开始时间。
语法：
/*定义动画*/
@关键帧动画名称{
/*样式规则*/
}
/*将其应用于元素*/。元素{
动画名称：动画名称(已在@关键帧中声明)；
/*或者使用动画缩写属性*/
动画：动画名称1s.
}2、在“@keyframes”规则中使用transform: rotate(旋转角度)控制旋转动作。
实现代码：
！DOCTYPEhtml
超文本标记语言
头
metachartset=’ utf-8 ‘
风格
div{
宽度width:100px
高度：100 px；
背景：粉红色；
margin:100px
animate : ymove 5 sin limited；
-web kit-animate : ymove 5 sin limited；/*SafariandChrome*/
}
@keyframesmymove{
50%{
变压器：旋转(360度)；
}
}
@-web kit-keyframesmymove {/* Safarandchrome */
50%{
变压器：旋转(360度)；
}
}
/style
/head
身体
分区/部门
/body
/html
这里介绍一下“如何用css3实现旋转动画”的内容。感谢您的阅读。如果你想了解更多的行业，可以关注网站。边肖将为您输出更多高质量的实用文章！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/148691.html