Css animation - FIFA

Developer
KONSTANTIN TRUNOV
Size
4,171 Kb
Views
36,432
  1. Css animation - FIFA Previews
  2. Css animation - FIFA HTML Codes
  3. Css animation - FIFA CSS Codes
  4. Css animation - FIFA JS Codes

How do I make an css animation - fifa?

What is a css animation - fifa? How do you make a css animation - fifa? This script and codes were developed by KONSTANTIN TRUNOV on 22 November 2022, Tuesday.

Css animation - FIFA Previews
IQ Test

Css animation - FIFA - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css animation - FIFA </title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="btn btn-primary btn-lg">Launch animation</button>
<audio src="http://karnizomsk.16mb.com/03963.mp3"></audio>
<div class="container-fluid"> <div class="row"> <div class="container"> <div class="col-md-12 title-container"> <div class="title"> <div class="title__left"> <div class="team"> <img src="https://upload.wikimedia.org/wikipedia/ru/thumb/7/7a/Manchester_United_FC_crest.svg/250px-Manchester_United_FC_crest.svg.png" width="100%"> </div> </div> <div class="title__right"> <div class="team"> <img src="http://abali.ru/wp-content/uploads/2014/05/emblema_fk_barselona_barcelona-150x150.png" width="100%"> </div> </div> </div> <div class="ball-container"> <div class="ball"></div> </div> <div class="team-name-container"> <div class="team-name"> Manchester United </div> <div class="team-name"> FC BARCELONA </div> </div> </div> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Css animation - FIFA - Script Codes CSS Codes

body { background: url('http://bgfons.com/upload/grass_texture241.jpg') no-repeat; background-size: cover; overflow-x: hidden;
}
.title-container { position: relative;
}
.title { width: 100%; height: 100px; box-shadow: 1px 1px 10px #000; border-radius: 10px; position: relative; margin-top: 25%; transition: 3s;
}
.title__left { width: 50%; height: inherit; background: rgba(38, 182, 251, 0.5); border-top-left-radius: 10px; border-bottom-left-radius: 10px; border: 1px solid #fff; border-right: none; float: left;
}
.title__left .team { float: left; width: 100px; height: 100px; border-radius: 10px; border: 3px solid #ddd; box-shadow: 1px 1px 3px #000; background: linear-gradient(to bottom, #fff 80%, #da080d); background-size: cover; margin-left: -30px;
}
.title__right { width: 50%; height: inherit; background: rgba(38, 182, 251, 0.5); border-top-right-radius: 10px; border-bottom-right-radius: 10px; border: 1px solid #fff; border-left: none; float: right;
}
.title__right .team { float: right; width: 100px; height: 100px; border-radius: 10px; border: 3px solid #ddd; box-shadow: 1px 1px 3px #000; background: linear-gradient(to bottom, #fff 80%, #a50044); background-size: cover; margin-right: -30px;
}
.ball-container { width: 1110px; position: absolute; top: 55%;
}
.ball { background: url('http://pngicon.ru//data/media/2/1_1735.png') no-repeat; width: 120px; height: 120px; background-size: cover; z-index: 50; display: block; position: relative; margin: 0 auto;
}
.animation { animation-name: tv; animation-duration: 6s;
}
.animation__opacity { animation-name: opacity; animation-duration: 6s;
}
.animation__ball { animation: rotate 6s;
}
.animation__team { animation: team 6s;
}
.animation__img { animation: img 6s;
}
.animation__team1 { animation: teamName1 6s;
}
.animation__team2 { animation: teamName2 6s;
}
.team-name { position: relative; float: left; text-transform: uppercase; width: 50%; text-align: center; font-size: 30px; color: #fff; line-height: 100px; text-shadow: 1px 1px 3px #000; top: -100px;
}
button { position: absolute; top: 25px ; right: 20px;
}
@keyframes tv { from { width: 0px; } to { width: 50%; }
}
@keyframes opacity { from { opacity: 0; } to { opacity: 1; }
}
@keyframes rotate { from { opacity: 0; transform: rotate(0deg); } 50% { transform: translateY(0px); transform: rotate(360deg); } 60% { transform: translateY(-110px); } 70% { transform: translateY(0px); } 78% { transform: translateY(-50px); } to { opacity: 1; transform: rotate(360deg); }
}
@keyframes team { from { transform: translateY(-500px); } to { transform: traslateY(0px); }
}
@keyframes img { 0%, 50% { opacity: 0; } 55% { opacity: 1; transform: scale(0.5) rotate(-45deg); } 70% { transform: scale(1.5) rotate(0deg); } 100% { transform: scale(1); }
}
@keyframes teamName1 { 0%, 50% { transform: translateX(-1500px); } 80% { transform: translateX(0px); }
}
@keyframes teamName2 { 0%, 50% { transform: translateX(1500px); } 80% { transform: translateX(0px); }
}

Css animation - FIFA - Script Codes JS Codes

$('button').click (function() { var title = $('.title'); var titleRight = $('.title__right'); var titleLeft = $('.title__left'); var ball = $('.ball'); var team = $('.team'); var img = $('img'); var teamName1 = $('.team-name-container .team-name:nth-of-type(1)'); var teamName2 = $('.team-name-container .team-name:nth-of-type(2)'); title.addClass('animation__opacity'); titleLeft.addClass('animation'); titleRight.addClass('animation'); ball.addClass('animation__ball'); team.addClass('animation__team'); img.addClass('animation__img'); teamName1.addClass('animation__team1'); teamName2.addClass('animation__team2'); setTimeout(function() { title.removeClass('animation__opacity') titleLeft.removeClass('animation'); titleRight.removeClass('animation'); ball.removeClass('animation__ball'); team.removeClass('animation__team'); img.removeClass('animation__img'); teamName1.removeClass('animation__team1'); teamName2.removeClass('animation__team2'); }, 6500); var audio = $('audio')[0]; audio.play();
});
Css animation - FIFA - Script Codes
Css animation - FIFA - Script Codes
Home Page Home
Developer KONSTANTIN TRUNOV
Username truman55
Uploaded November 22, 2022
Rating 3
Size 4,171 Kb
Views 36,432
Do you need developer help for Css animation - FIFA?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

KONSTANTIN TRUNOV (truman55) Script Codes
Name
Progress bar with animation
Background effect for text
Simple CSS3 Text animation
Neon clock
Cutting the image into 2 parts when hovering the mouse
HAMBURGER ANIMATION
Flag russia linear-gradient
A Pen by KONSTANTIN TRUNOV
Balloons SVG
Random colored balls
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!