• 技术文章 >web前端 >前端问答

    CSS3设置动画的相关属性有哪些

    青灯夜游青灯夜游2022-01-12 17:27:57原创65

    动画相关属性有:transform、transform-origin、transition、“@keyframes”、animation、animation-name、animation-duration、animation-delay等。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css3有三种动画分为:transform、transition、animation

    1、transform(2D/3D 转换属性)

    属性说明CSS
    transform适用于2D或3D转换的元素3
    transform-origin允许您更改转化元素位置3
    transform-style3D空间中的指定如何嵌套元素3
    perspective指定3D元素是如何查看透视图3
    perspective-origin指定3D元素底部位置3
    backface-visibility定义一个元素是否应该是可见的,不对着屏幕时3

    2、transition(过渡属性)

    属性说明CSS
    transition此属性是 transition-property、transition-duration、transition-timing-function、transition-delay 的简写形式。3
    transition-property设置用来进行过渡的 CSS 属性。3
    transition-duration设置过渡进行的时间长度。3
    transition-timing-function设置过渡进行的时序函数。3
    transition-delay指定过渡开始的时间。3

    3、animation(动画属性)

    属性描述CSS
    @keyframes定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。3
    animation复合属性。检索或设置对象所应用的动画特效。3
    animation-name检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义3
    animation-duration检索或设置对象动画的持续时间3
    animation-timing-function检索或设置对象动画的过渡类型3
    animation-delay检索或设置对象动画的延迟时间3
    animation-iteration-count检索或设置对象动画的循环次数3
    animation-direction检索或设置对象动画在循环中是否反向运动3
    animation-play-state检索或设置对象动画的状态3

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			div {
    				width: 50px;
    				height: 50px;
    				background: red;
    				margin: 100px;
    				animation: mymove 5s infinite;
    				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
    			}
    
    			@keyframes mymove {
    				50% {
    					width: 150px;
    					height: 150px;
    					transform: rotate(360deg);
    				}
    
    			}
    
    			@-webkit-keyframes mymove{  /* Safari and Chrome */
    				50% {
    					width: 100px;
    					height: 100px;
    					transform: rotate(360deg);
    				}
    
    			}
    		</style>
    	</head>
    	<body>
    
    		<div></div>
    
    	</body>
    </html>

    1.gif

    (学习视频分享:css视频教程

    以上就是CSS3设置动画的相关属性有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3 动画 属性
    上一篇:33个非常实用的JavaScript一行代码,建议收藏! 下一篇:css3中常用的背景属性有哪几个

    相关文章推荐

    • 设置元素透明度的css3属性是什么• css3怎样实现旋转缩放动画效果• css3中设置圆角边框的样式为什么• 怎么利用css3实现下凹型字体• css3怎么办能选择第三个li元素• css3放大两倍的语法是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网