Line around element

Question

I'm want animate 3 .svg images:

<div class="sequence">
  <img src="assets/img/1.svg"/>
  <img src="assets/img/2.svg"/>
  <img src="assets/img/3.svg"/>
</div>

and css:

.sequence {
  position: relative;
}

.sequence img {
  position: absolute;
  top: 0;
  opacity: 0;  
  animation: cycle 0.3s steps(1) infinite;
}

@keyframes cycle {
  0%  { opacity: 1; }
  33% { opacity: 0; }
}

.sequence img:nth-child(2) {
  animation-delay: 0.1s;
}

.sequence img:nth-child(3) {
  animation-delay: 0.2s;
}

but this way at some point animation starts slip and blink, with including of <img src="assets/img/1.svg" alt="" alt=""/> in <a class="sequence" id="anm"> does not allows well align image in line with element center.

So, another way from background:

img{
  width: 60px;
  height: 60px;
  border: 0px;     
  border-style: none;  /*border-style: hidden;*/
  outline: none;
  animation:  rotateImages 0.3s infinite; 
}

@keyframes rotateImages {
  0%   { background: url("assets/img/1.svg"); }
  32%   { background: url("assets/img/1.svg"); }
  33%  { background: url("assets/img/2.svg"); }
  65%  { background: url("assets/img/2.svg"); }
  66% { background: url("assets/img/3.svg"); }
  100% { background: url("assets/img/3.svg"); }
}

with <img></img> works without this lacks, but I can't figure out, how to remove thin black line around created element, border around pink squire, shown below, which appears with .svg, .gif, .png. I've tried add border-width: 0px;, just in case even border-color: white; because my backgrounds is white, but it looks like it is something else. I'm not sure how to remove it:

Example:

https://jsfiddle.net/3gxpbauo/

.png-s, which is same image of .svg:

As I've noted, I want align it in one text central line with <label><h1><p id="nameblock">Text</p></h1></label>. With <div id="container"></div>, shown in Prajyot Tote answer, or as shown above with <a class="sequence" id="anm">, (which also shows tag without outline successfully), in both cases aligns elements on separate lines, or with using of .inline{display:inline-block;} in bottom line of the text. Here is <img> and <div id="container"></div> difference:

Solution:

So, the solution I found for my particular task with help of Prajyot Tote, based on answer, uses #container without #img with border: 0px; for .inline:

#container {
  width: 72px;
  height: 73px;
  border: 0px;
  animation:  rotateImages 0.3s infinite; 
}

.inline{display:inline-block;vertical-align: middle; border: 0px;}

@keyframes rotateImages {
  0%   { background: url("https://i.stack.imgur.com/d0tnz.png"); }
  32%   { background: url("https://i.stack.imgur.com/d0tnz.png"); }
  33%  { background: url("https://i.stack.imgur.com/elROb.png"); }
  65%  { background: url("https://i.stack.imgur.com/elROb.png"); }
  66% { background: url("https://i.stack.imgur.com/O0fGg.png"); }
  100% { background: url("https://i.stack.imgur.com/O0fGg.png"); }
}

<div class="inline">
  <label><h1><p id="nameblock">Some text</p></h1></label>
</div>
<div id="container" class="inline"></div>

@Robert Longson Hello, It is just 3 vector images of pink square with slightly different position, with 0.3s makes swinging motion, just fast loop image by image animation (it is not svg animation, in my case .svg used because vector quality for such element). My background is white, and my .css should not include any black line from somewhere else — lf80, Sep 10 '19 at 02:02
@Robert Longson it seems like it is not `.svg` problem, because I have same line with .gif and .png, I've edited question with .png, which is same to .svg images and also has this undesired line around in html, please check — lf80, Sep 10 '19 at 02:20
do you have a live example? fiddle or codepen? It might be browser specific. — Prajyot Tote, Sep 10 '19 at 02:46
Without seeing your code, hard to tell, but take a look at this. There are some nuances to using src and specifying border:none that might be helpful here: https://stackoverflow.com/questions/2153425/how-remove-border-around-image-in-css — Justin C, Sep 10 '19 at 06:27
@Prajyot Tote Hello, I've edited my post with example, please check https://jsfiddle.net/3gxpbauo/ — lf80, Sep 10 '19 at 12:28
@Justin C Hello, I've include all code, and here is minimal example which shows same outline result https://jsfiddle.net/3gxpbauo/ — lf80, Sep 10 '19 at 12:29

score 2 · Accepted Answer · edited Sep 12 '19 at 12:55

2

The issue isn't with border or svg or png, but rather tag you are using.

background-image can be used with any element. Change img tag to div and everything will be fine.

#container,
img {
  width: 60px;
  height: 60px;
  animation: rotateImages 0.3s infinite;
}

h1 {
  margin: 0;
  line-height: 1;
  padding: 0 20px;
}

.inline {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #eee;
}

@keyframes rotateImages {
  0% {
    background: url("https://i.stack.imgur.com/d0tnz.png");
  }
  32% {
    background: url("https://i.stack.imgur.com/d0tnz.png");
  }
  33% {
    background: url("https://i.stack.imgur.com/elROb.png");
  }
  65% {
    background: url("https://i.stack.imgur.com/elROb.png");
  }
  66% {
    background: url("https://i.stack.imgur.com/O0fGg.png");
  }
  100% {
    background: url("https://i.stack.imgur.com/O0fGg.png");
  }
}

<div class="sequence">
  <div class="inline">
    <label><h1><p id="nameblock">Some text</p></h1></label>
  </div>
  <div id="container" class="inline"></div>
</div>

The border that we see is of empty img tag. Can't help with that empty img tag rendering.

Updated code to make elements properly inline.

Note: Added border, so that elements position can be seen properly. And padding is for aesthetics.

edited Sep 12 '19 at 12:55

Quentin

914,110
126
1,211
1,335

answered Sep 10 '19 at 12:48

Prajyot Tote

670
5
12

Hello! Yes, but how do you align it in one line with `
Some text
` and `
` it goes under element, same way as described in my post with `` for both `css` examples, which also shows tag without outline successfully, but aligns elements on separate lines – lf80 Sep 10 '19 at 12:58
Add `display:inline-block` to `#container` o.O? Can you copy past the section with label? I didn't see any html of that sortin your question. – Prajyot Tote Sep 10 '19 at 13:03
I've added result comparison `` and `
` difference, please check. `` goes directly in line with text, when `container` goes below the central line of text with `.inline{display:inline-block;}`, not sure what can I use to align it as `` does – lf80 Sep 10 '19 at 13:38
did you try `vertical-align:middle` ? That should do the trick. Though you have to be careful about which element you are adding it to. – Prajyot Tote Sep 10 '19 at 13:55
Sorry for late replay. I've added solution on my post, seems like everything works as required, based on your answer with little edit. The only thing is not quite clear to me, how to include `@keyframes` separate `mycss.css` to make it work from `` in ``, without including in `html` ` – lf80 Sep 10 '19 at 23:30

score -1 · Answer 2 · edited Sep 10 '19 at 18:31

-1

border: 1px solid #FFFFFF;

Use this property, hopefully it works. If it is not working then increase border size to 2 or 3 px. or use border: none; property.

edited Sep 10 '19 at 18:31

brooksrelyt

3,925
5
31
54

answered Sep 10 '19 at 14:28

Asad Aslam

1

Welcome to Stack Overflow. I encourage you to read the answer left by Prajyot Tote. Do you see how that answer has an explanation and a demonstration? – Jason Aller Sep 10 '19 at 15:52

Line around element

2 Answers2