分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

css3动画

发布时间:2023-09-06 02:24责任编辑:白小东关键词:动画

animation-name:指定由@keyframes描述的关键帧;

animation-duration:设置动画完成一个周期的时长;

animation-duration:3s;//3秒完成一个动画

animation-timing-function:设置动画速度;

animation-timing-function:ease;//先加速后减速animation-timing-function:linear//匀速animation-timing-function:ease-in;//加速animation-timing-function:ease-out;//先加速后减速animation-timing-function:ease-in-out;//先减速再加速再减速
//所有的速度曲线都不一样

animation-direction:设置动画是否反向播放;注意animation-direction:reverse反转的是关键帧和animation-timing-function

animation-direction:normal;//运动过程从form到toanimation-direction:reverse;//运动过程从to到fromanimation-direction: alternate;//开始时图像在from位置,运动过程从from到to再到from,直到完成动画,最后一次完成时会立马跳回原位置animation-direction:alternate-reverse;//开始时图像立马到to的位置,运动过程从to到from再到to,直到完成动画,最后一次完成时会立马跳回原位置animation-direction:normal,reverse;//运动过程从from到to,然后立马返回起始位置

animation-delay:设置动画延迟;

animation-delay:3s;//动画延迟3秒后开始

animation-iteration-count:设置动画运行次数,运行期间不受animation-delay影响;

animation-iteartion-count:3;//重复3次动画

animation-fill-model:设置元素在动画外的动画;

animation-fill-model:none;//默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为animation-fill-mode:forwards;//在动画完成后停留在最后一帧animation-fill-mode:backward;//在动画完成后回到起始位置animation-fill-mode:both;//动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性

css3动画

原文地址:https://www.cnblogs.com/xiej/p/10041408.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved