在网页设计中,CSS动画经常被使用,它可以让我们的页面更生动、有趣。以下是CSS动画语法大全,让我们一起来学习吧!
CSS动画的基本语法:
/* 选择器 */ selector { /* 过渡效果 */ transition: property duration easing delay; /* 动画效果 */ animation: name duration timing-function delay iteration-count direction fill-mode play-state; }
其中,transition
表示过渡效果,animation
则表示动画效果。
/* 属性 */ property: value; /* 过渡时间 */ transition-duration: time; /* 过渡时间函数 */ transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n); /* 延迟时间 */ transition-delay: time; /* 过渡属性 */ transition-property: none | all | property1[,property2,…];
在过渡效果中,我们可以设置过渡时间、时间函数、延迟时间和过渡属性。
/* 动画名字 */ animation-name: name; /* 动画时间 */ animation-duration: time; /* 动画时间函数 */ animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n); /* 延迟时间 */ animation-delay: time; /* 动画次数 */ animation-iteration-count: number | infinite; /* 动画方向 */ animation-direction: normal | reverse | alternate; /* 结束状态 */ animation-fill-mode: none | forwards | backwards | both; /* 播放状态 */ animation-play-state: paused | running;
在动画效果中,我们可以设置动画名字、时间、时间函数、延迟时间、动画次数、动画方向、结束状态和播放状态。
使用关键帧:
@keyframes name { /* 样式 */ from { property: value; } to { property: value; } /* 或 */ 0% { property: value; } 50% { property: value; } 100% { property: value; } }
关键帧是定义动画的关键,我们可以通过关键帧来设置动画的样式和属性。
示例:
/* 过渡效果 */ div { transition: width 2s; } /* 动画效果 */ @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(50px); } 100% { transform: translateX(100px); } } /* 使用动画效果 */ div { animation: move 2s cubic-bezier(.46,.03,.52,.96) infinite alternate; }
以上就是CSS动画语法的全部内容,希望对大家有所帮助!