Implement simple animation effects with css-CSS Tutorial-php.cn

Implement simple animation effects with css

一个新手

Release： 2017-10-19 09:11:11

Original

3476 people have browsed it

In the past few days, the company needs to update a mobile web page. Because the task is simple, I, as a newbie, will do it. The first time I came into contact with CSS was when I was a freshman in 2014 and I studied it with HTML, and I never came into contact with it again. So I had to study and complete the task at the same time (⊙﹏⊙)b

Structure: Create a folder named "main" under the WebContent directory in the java web project, and then create two subfolders in the folder. css (to store css files), img (to store images), and html files are placed in the main folder.

In the html file, don’t forget to add ... " type="text/css">, otherwise the css style cannot be loaded.

The overall layout in css is not interesting to write, so let’s talk about the animation settings

.logo{
		            position: absolute;
			    width: 86%;
			    left: 6%;
			    height: 33%;
			    z-index: 3;
			    top: 50%;
			    background: url(../img/test.png) no-repeat top center;
			    background-size: contain;
			    animation: bounceInUp .7s ease 0s normal both;
			    -moz-animation: bounceInUp .7s ease 0s normal both;
			    -webkit-animation: bounceInUp .7s ease 0s  normal both;
			    -o-animation:  bounceInUp .7s ease 0s normal both;
			}
			section.active .logo{
				animation: bounceInUp .7s ease 0s normal both;
				-moz-animation: bounceInUp .7s ease 0s normal both;
				-webkit-animation: bounceInUp .7s ease 0s  normal both;
				-o-animation:  bounceInUp .7s ease 0s normal both;
			}
			
			@keyframes bounceInUp
			{
			0% {top: -30%;}
			40%{top: 55%;}
			60%{top: 30%;}
			80%{top: 45%;}
			100% {top: 50%;}
			}
			
			@-webkit-keyframes bounceInUp  /* Safari 鍜� Chrome */
			{
			0% {top: -30%;}
			40%{top: 55%;}
			60%{top: 30%;}
			80%{top: 45%;}
			100% {top: 50%;}
			}
			@-moz-keyframes bounceInUp /* Firefox */
			{
			0% {top: -30%;}
			40%{top: 55%;}
			60%{top: 30%;}
			80%{top: 45%;}
			100% {top: 50%;}
			}
			
			@-o-keyframes bounceInUp /* bounceInUp */
			{
			0% {top: -30%;}
			40%{top: 55%;}
			60%{top: 30%;}
			80%{top: 45%;}
			100% {top: 50%;}
			}

Copy after login

.logo{...} contains all of a certain image Relevant css styles,

The position attribute is used to specify the positioning type of the element, and the absolute value is to generate an absolutely positioned element;

width and height are to set the width and height of the image. You need to pay attention here , if the width and height are not set for the picture, the picture itself will not expand the element;

　　left (/right) is used to specify the picture and the left border (/right border).

z-index is used to specify the order in which pictures are stacked. The larger the value behind, the picture will be displayed at the front (that is, it will not be covered by other pictures);

top specifies the picture. The distance from the top border;

Background:url(../img/2.png); Specify the path of the image used

Background-repeat: attribute indicates whether to repeat the image, generally In this case, the default is "no-repeat", that is, no repetition

The background-size attribute sets the size of the image background

The last four sentences in .logo{...} are correct For the setting of image animation, here we need to have a certain understanding of the syntax of the animation animation attribute:

        animation:   name    duration    timing-function     delay    iteration-count    direction    fill-mode     play-state;
其相应的作用是：
　　　　动画(声明) :   动画的名称   动画完成时间    运动路径   延迟时间   播放次数   是否逆向播放   动画不播放时要用到的元素样式   指定动画是否正在运行或暂停
     此时会有人说为什么相同的一句语法要重复四次？因为有些浏览器不支持keyframes规则，所以要用相应的浏览器中的支持替代，所以
    @keyframes bounceInUp{...}  
    @-webkit-keyframes bounceInUp{...} 
    @-moz-keyframes bounceInUp{...} 
    @-o-keyframes bounceInUp{...}
    这四条语句块中的内容也是完全相同，其中的0%{}，40%{}，60%{}，80%{}，100%{}指定图片的动画在完成到整体动画的百分比进度时的位置所在，因为我使用的是bounceInUp动画，即从上往下进入，所以其中用top指定图片的位置

最后在html中调用外部css样式语句，在<body>...</body>中添加<p class="logo"></p>即可调用动画

Copy after login

The above is the detailed content of Implement simple animation effects with css. For more information, please follow other related articles on the PHP Chinese website!